ngForと非同期パイプAngular 2で監視可能なオブジェクトの配列を使用する


91

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

ただし、availabilitiesはまだ監視可能なオブジェクトのプロパティではないため、availabilitiesインターフェースで次のように定義したとしても、エラーになります。

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

非同期パイプと* ngForを使用して監視可能なオブジェクトから非同期で配列を表示するにはどうすればよいですか?私が得るエラーメッセージは:

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

実際のエラーメッセージは何ですか?
ギュンターZöchbauer

エラーを追加するために編集
C.カーンズ

最新のangular-rc1の構文は*ngFor="let appointment of _nextFourAppointments.availabilities | async">
Jagannath

これは本当ですが、エラーの原因ではありません。単に警告をスローします。
C.カーンズ2016年

3
どこかに誤植があると思います。エラーはavailabiltiesあるはずですがavailabilities
Ivan Sivak 2016年

回答:


152

ここに例があります

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

私のget関数はサブジェクトを返しますが 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'
C.カーンズ

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
C.カーンズ2016年

すでに観測可能でした!購読するだけでいいのです!
C.カーンズ2016年

被験者の統合に関してさらに問題がありました。ここで観測し、被験者を使用してStackBlitzだ:stackblitz.com/edit/subject-as-observable-list-example
IceWarrior353

12

誰もこの投稿につまずきました。

私は信じている正しい方法です:

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

1

私が探しているのはこれだと思います

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


1

配列はありませんが、オブジェクトのストリームであってもオブザーバブルを配列のように使用しようとしている場合、これはネイティブでは機能しません。オブザーバブルを削除するのではなくオブザーバブルに追加することだけに関心があると仮定して、これを修正する方法を以下に示します。

ソースがBehaviorSubjectタイプのオブザーバブルを使用しようとしている場合は、それをReplaySubjectに変更してから、コンポーネントで次のようにサブスクライブします。

成分

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

HTML

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

scan演算子の代わりに使用できます.pipe(toArray())
MotKohn

独自に作成する際のもう1つの落とし穴Subjectは、呼び出しではありませんcomplete()。アキュムレータは実行されません。
MotKohn
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.