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"]}

然而，当我跑步时，我得到了：

错误：./ContactsListComponent类中的错误ContactsListComponent - 内联模板：2：8引起：找不到不同的支持对象 '对象'类型的'[object Object]'。 NgFor仅支持绑定像阵列这样的Iterables。

我已经阅读了其他SO主题，angular.io和我的ng2-book，它们有类似的例子，但我只是没想到这一点。

我做错了什么？

Answer 1

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

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

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

1 个答案: