使用来自可观测对象的数组与 ngFor 和异步管角度2

我正在尝试理解如何使用角度2的可观测数据。我有这样的服务:

import {Injectable, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from './availabilities-interface'


@Injectable()
export class AppointmentChoiceStore {
public _appointmentChoices: BehaviorSubject<Availabilities> = new BehaviorSubject<Availabilities>({"availabilities": [''], "length": 0})


constructor() {}


getAppointments() {
return this.asObservable(this._appointmentChoices)
}
asObservable(subject: Subject<any>) {
return new Observable(fn => subject.subscribe(fn));
}
}

This BehaviorSubject is pushed new values as so from another service:

that._appointmentChoiceStore._appointmentChoices.next(parseObject)

我订阅它的形式是一个可观察的组件，我想显示它在:

import {Component, OnInit, AfterViewInit} from '@angular/core'
import {AppointmentChoiceStore} from '../shared/appointment-choice-service'
import {Observable} from 'rxjs/Observable'
import {Subject} from 'rxjs/Subject'
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from '../shared/availabilities-interface'




declare const moment: any


@Component({
selector: 'my-appointment-choice',
template: require('./appointmentchoice-template.html'),
styles: [require('./appointmentchoice-style.css')],
pipes: [CustomPipe]
})


export class AppointmentChoiceComponent implements OnInit, AfterViewInit {
private _nextFourAppointments: Observable<string[]>
    

constructor(private _appointmentChoiceStore: AppointmentChoiceStore) {
this._appointmentChoiceStore.getAppointments().subscribe(function(value) {
this._nextFourAppointments = value
})
}
}

And the attempt to display in the view as so:

  <li *ngFor="#appointment of _nextFourAppointments.availabilities | async">
<div class="text-left appointment-flex">{{appointment | date: 'EEE' | uppercase}}

然而，可用性还不是可观测对象的属性，所以它会出错，即使我在可用性接口中这样定义它:

export interface Availabilities {
"availabilities": string[],
"length": number
}

如何使用异步管道和 * ngFor 从可观察对象异步显示数组？我得到的错误消息是:

browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined
187329 次浏览
小开
最佳答案

举个例子

// in the service
getVehicles(){
return Observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}])
}


// in the controller
vehicles: Observable<Array<any>>
ngOnInit() {
this.vehicles = this._vehicleService.getVehicles();
}


// in template
<div *ngFor='let vehicle of vehicles | async'>
\{\{vehicle.name}}
</div>
小开

谁也曾经在这个职位上跌跌撞撞。

我相信这是正确的方法:

  <div *ngFor="let appointment of (_nextFourAppointments | async).availabilities;">
<div>\{\{ appointment }}</div>
</div>
小开

我想你要找的是这个

<article *ngFor="let news of (news$ | async)?.articles">
<h4 class="head">\{\{news.title}}</h4>
<div class="desc"> \{\{news.description}}</div>
<footer>
\{\{news.author}}
</footer>

小开

如果你没有一个数组，但是你试图像数组一样使用你的观察，即使它是一个对象流，这不会工作本地。我将在下面展示如何修复这个问题，假设您只关心向可观察对象添加对象，而不是删除它们。

If you are trying to use an observable whose source is of type BehaviorSubject, change it to ReplaySubject then in your component subscribe to it like this:

组件

this.messages$ = this.chatService.messages$.pipe(scan((acc, val) => [...acc, val], []));

Html

<div class="message-list" *ngFor="let item of messages$ | async">

提交答案