Typescript 通过ngFor和Async Pipe Angular 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));
    }
}

我以可观察的形式在我想要显示它的组件中订阅它：

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
        })
    }
}

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

browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined

这里有一个例子

// 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>

//在服务中
getVehicles（）{
返回可观察的.interval（2200）.map（i=>[{name:'car1'}，{name:'car2'}]）
}
//在控制器中
车辆：可观察
恩戈尼尼特（）{
this.vehicles=this.\u vehicleService.getVehicles（）；
}
//模板中
{{vehicle.name}

谁也曾被这篇文章绊倒过

我相信这是正确的方法：

  <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>

{{news.title}
{{news.description}}
{{news.author}}

---

如果您没有数组，但试图像数组一样使用可观察对象，即使它是一个对象流，也无法在本机工作。我将在下面演示如何解决这个问题，假设您只关心将对象添加到可观察对象，而不是删除它们

如果您试图使用源类型为BehaviorSubject的observable，请将其更改为ReplaySubject，然后在组件中按如下方式订阅：

组成部分 Html

实际错误消息是什么？编辑以添加最新angular-rc1的错误语法为

*ngFor=“let appointment of _nextfourappoints.availabilities | async”>

这是正确的，但不会导致错误。它只是发出了一个警告。我相信某处有一个打字错误。错误为

availabilities

，而应该有

availabilities

我的get函数正在返回一个主题，尽管：

public\u appointchoices:subject=new subject（）getAppointments（）{返回这个。\u appointchoices.map（object=>object.availabilities.subscribe（）

，在控制器中，当我将其设置为相等时，我得到一个错误：

browser\u adapter.js:77Error:Invalid参数“[object object]”对于管道“asyncpippe”

，我如何将主体转换为可观察的？

public\u appointmentChoices:subject=new subject（）getAppointments（）{return（this.\u appointchoices.map（object=>object.availabilities）.asObservable（））}}

这给了我一个错误：

属性asObservable在类型observable上不存在

，但是_appointmentChoices是一个

主题

？它已经是一个observable了！我只需要订阅它！我在集成主题时遇到了一个额外的问题。这里是一个使用observable和subjects的StackBlitz：而不是

的can

运算符您可以使用

.pipe（toArray（））

创建自己的

主题时的另一个陷阱

未调用

complete（）

。累加器将永远不会运行。

// 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>

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

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