typescript – 使用带有ngFor和Async Pipe Angular 2的Observabl
发布时间:2020-12-17 07:55:45 所属栏目:安全 来源:网络整理
导读:我试图了解如何在Angular 2中使用Observables.我有这个服务: import {Injectable,EventEmitter,ViewChild} from '@angular/core';import {Observable} from "rxjs/Observable";import {Subject} from "rxjs/Subject";import {BehaviorSubject} from "rxjs/R
我试图了解如何在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) 我在组件中以可观察的形式订阅它,我希望将其显示在: 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
这是一个例子
// 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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |