我是角色的新手并且开始倾斜角度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.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>
答案 0 :(得分:0)
由于您使用的是异步。尝试删除susbcribe。在您的原始代码上。这是类似的video。将$用于Observable属性真的很有用......
答案 1 :(得分:0)
您的* ngIf存在问题,您无法在没有异步管道的情况下直接检查您的可观察长度。试试这个,
*ngIf="(users$ | async)?.length==0"