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() только для тестирования, и я вижу это в хромированной консоли:

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 threads, angular.io и моей ng2-book, которая имеет похожие примеры, но я просто не понимаю этого.

Что я делаю неправильно?

Answer 1

Observable.from будет излучать каждый элемент массива.

Использовать Observable.of для испускания всего массив.