Я новичок в angular и начал склоняться к angular 4. Данные не связываются с директивой ngfor
на компоненте, использующем асинхронный конвейер. Пожалуйста помоги
Пользовательский сервис использует HTTP-запрос для получения данных из API:
user.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { User } from "../Models/user";
@Injectable()
export class UserService {
constructor(private http: Http) { }
get(url: string): Observable<User[]> {
return this.http.get(url)
.map(response => response.json() as User[])
// .do(data => console.log("All: " + JSON.stringify(data)))
.catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Здесь я использую наблюдаемый интерфейс User [] для списка пользователей:
user.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { UserService } from '../Services/user.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { User } from '../Models/user';
import { DBOperation } from '../Shared/enum';
import { Observable } from 'rxjs/Observable';
import { Global } from '../Shared/global';
@Component({
templateUrl: 'app/Components/user.component.html'
})
export class UserComponent implements OnInit {
@ViewChild('modal') modal: ModalComponent;
users$: Observable<User[]>;
user: User;
msg: string;
indLoading: boolean = false;
userForm: FormGroup;
dbops: DBOperation;
modalTitle: string;
modalBtnTitle: string
constructor(private fb: FormBuilder, private userService: UserService)
{ }
ngOnInit(): void {
this.userForm = this.fb.group({
Id: [''],
UserName: ['', Validators.required],
Password: ['', Validators.required],
FirstName: ['', Validators.required],
LastName: ['', Validators.required],
Gender: ['', Validators.required]
});
this.LoadUsers();
}
LoadUsers(): void {
this.indLoading = true;
this.users$ = this.userService.get('http://localhost:29712/api/userapi/');
this.indLoading = false;
}
}
Шаблон для асинхронного канала для подписки наблюдаемой пользовательской переменной:
user.component.html
<div class='panel panel-primary'>
<div class='panel-heading'>
User Management
</div>
<div class='panel-body'>
<div class='table-responsive'>
<div class="alert alert-info" role="alert" *ngIf="indLoading"><img src="../../images/loading.gif" width="32" height="32" /> Loading...</div>
<div *ngIf='users && users.length==0' class="alert alert-info" role="alert">No record found!</div>
<table class='table table-striped' *ngIf='users && users.length'>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users$ | async">
<td>{{user.FirstName}}</td>
<td>{{user.LastName}}</td>
<td>{{user.Gender}}</td>
</tr>
</tbody>
</table>
<div>
</div>
</div>
<div *ngIf="msg" role="alert" class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
{{msg}}
</div>
</div>
/api/userapi/
запрос будет выполнен дважды - person yurzui   schedule 30.07.2017response => response.json() as IUser[]
равным нулю. Вы уверены, что служба отвечает той же структурой данных, что и ваш IUser? - person dee zg   schedule 30.07.2017ngIf="users && users.length"
, гдеusers
обозначается - person yurzui   schedule 30.07.2017ngIf
вы упомянули, что не разрешаетtrue
) или таблица отображается, но не отображаются строки в таблице? - person dee zg   schedule 30.07.2017@Input()
в немом компоненте, установленном наObservable
и проверять вещи вOnChanges
. Но теперь интересно посмотреть, почему это не работает при такой настройке. - person dee zg   schedule 30.07.2017ngFor
, как он сказал в вопросе. но конечно,ngIf
сusers
наблюдаемым - это проблема. - person dee zg   schedule 30.07.2017ngIf
;) - person dee zg   schedule 30.07.2017