[typescript] ngFor 및 Async Pipe Angular 2와 함께 Observable Object의 배열 사용

Program / 글쓴이

Angular 2에서 Observable을 사용하는 방법을 이해하려고합니다.이 서비스가 있습니다. 

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

그러나 availabilities는 아직 관찰 가능한 객체의 속성이 아니므로 오류가 발생합니다.

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>

답변

이 게시물을 우연히 발견 한 사람도 있습니다.

나는 올바른 방법이라고 믿습니다.

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

답변