我正在转换一个角2组件来使用异步数据源。
我有一个<div class="col s4" *ngFor="let line of lines; let i = index;">
,当lines
是一个对象数组时,它可以工作,但是,行现在是一个可以观察到的对象数组。
这会导致错误:
无法找到“对象”类型的不同支持对象“对象对象”。NgFor只支持绑定到诸如数组之类的Iterable。
然而,我尝试了<div class="col s4" *ngFor="let line of lines | async; let i = index;">
,但这似乎没有什么区别。
我该怎么处理呢?
发布于 2017-01-03 09:42:38
下面是绑定到可观察数组的示例。如果您也发布控制器/组件代码,这将是有帮助的。
@Component({
selector: 'my-app',
template: `
<div>
<h2>Wikipedia Search</h2>
<input type="text" [formControl]="term"/>
<ul>
<li *ngFor="let item of items | async">{{item}}</li>
</ul>
</div>
`
})
export class App {
items: Observable<Array<string>>;
term = new FormControl();
constructor(private wikipediaService: WikipediaService) {
this.items = this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => this.wikipediaService.search(term));
}
}
http://blog.thoughtram.io/angular/2016/01/07/taking-advantage-of-observables-in-angular2-pt2.html
Using an array from Observable Object with ngFor and Async Pipe Angular 2
以上问题的答案是:
// in the service
getItems(){
return Observable.interval(2200).map(i=> [{name: 'obj 1'},{name: 'obj 2'}])
}
// in the controller
Items: Observable<Array<any>>
ngOnInit() {
this.items = this._itemService.getItems();
}
// in template
<div *ngFor='let item of items | async'>
{{item.name}}
</div>
https://stackoverflow.com/questions/41448950
复制相似问题