Angular2：将可观察数组绑定到组件时出错

Question

我正在尝试在列表中显示 Contact 的列表：

<h1>Contacts</h1>
<ul>
    <li *ngFor="let contact of contacts$ | async">
        <ul>
            <h1>Name: {{contact.name}}</h1>
            <li>ObjectID: {{contact._id}}</li>
            <li>LastName: {{contact.lastName}}</li>
            <li>FirstName: {{contact.firstName}}</li>
            <li>Email: {{contact.email}}</li>
            <li>Notes:
                <ul *ngFor="let note of contact.notes">
                    <li>{{note}}</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

contacts$ 是一个 Observable<Array<Object>>:

@Component({
    selector: 'contacts-list',
    templateUrl: 'list.component.html'
})
export class ContactsListComponent implements OnInit {
    contacts$: Observable<Array<Object>>;


    constructor(private logger: LoggerService,
                private router: Router,
                private trackerService: TrackerService) {
        this.logger.debug(`ContactListComponent.ctor`);
    }

    ngOnInit() {
        this.contacts$ = this.trackerService.cache('tracker/contacts');
    }
}

现在，TrackerService.cache(...) 只是从硬编码数组创建一个 Observable，用于测试：

public cache(path: string): Observable<Array<Object>> {
    let retval = [new Object({
        _id: '123abc',
        lastName: 'last',
        firstName: 'first',
        email: 'someone@example.com',
        notes: ['note 1', 'note 2']
    }), new Object({
        _id: '123abc',
        lastName: 'last',
        firstName: 'first',
        email: 'someone@example.com',
        notes: ['note 1', 'note 2']
    })];
    return Observable.from(retval)
        .map((v) => {
            this.logger.debug(`Mapping value: ${JSON.stringify(v)}`);
            return v;
        });
}

.map()操作只是为了测试，我在chrome控制台看到了这个：

debug DEBUG: Mapping value: {"_id":"123abc","lastName":"last","firstName":"first","email":"someone@example.com","notes":["note 1","note 2"]}

然而，当我运行这个时，我得到：

Error: Error in ./ContactsListComponent class ContactsListComponent - inline template:2:8 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我已经阅读了其他 SO 线程，angular.io，以及我的 ng2-book，其中有类似的示例，但我只是没有弄明白。

我做错了什么？

Answer 1

Observable.from 将发出数组的每个个元素。

使用Observable.of发射整个数组。

Angular2：将可观察数组绑定到组件时出错

Angular2: Error binding observable array to component

observable

ngfor

angular