将 Observable Object 中的数组与 ngFor 和 Async Pipe Angular 2 一起使用
我试图了解如何在 Angular 2 中使用 Observables。我有这项服务：
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));
}
}
这个 BehaviorSubject 是从另一个服务推送的新值：
that._appointmentChoiceStore._appointmentChoices.next(parseObject)
我在要显示它的组件中以 observable 的形式订阅它：
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
})
}
}
并尝试在视图中显示如下：
<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
*ngFor="let appointment of _nextFourAppointments.availabilities | async">
availabilties 而应该有 availabilities
这是一个例子
// 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>
如果你没有数组，但你试图像数组一样使用你的 observable，即使它是一个对象流，这将无法在本机工作。我将在下面展示如何解决此问题，假设您只关心将对象添加到可观察对象，而不是删除它们。
如果您尝试使用其源为 BehaviorSubject 类型的 observable，请将其更改为 ReplaySubject，然后在您的组件中像这样订阅它：
零件
this.messages$ = this.chatService.messages$.pipe(scan((acc, val) => [...acc, val], []));
html
<div class="message-list" *ngFor="let item of messages$ | async">
.pipe(toArray()) 而不是 scan 运算符
Subject 时的另一个陷阱是不调用 complete()。蓄能器永远不会运行。
public _appointmentChoices: Subject<any> = new Subject() getAppointments() { return this._appointmentChoices.map(object=>object.availabilities).subscribe() }，但在控制器中，当我将它设置为相等时，我收到错误：browser_adapter.js:77Error: Invalid argument '[object Object]' for pipe 'AsyncPipe'，如何将主题变成可观察的？public _appointmentChoices: Subject<any> = new Subject() getAppointments() { return (this._appointmentChoices.map(object=>object.availabilities).asObservable()) } }这给了我错误：property asObservable does not exist on type observable，但 _appointmentChoices 是Subject？