[解決済み] ngForとAsync Pipe Angular 2でObservableオブジェクトから配列を利用する。
2022-10-13 16:48:10
質問
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}}
しかし、availabilitiesはまだobservableオブジェクトのプロパティではないので、availabilitiesインターフェースでそのように定義しているにもかかわらず、エラーになります。
export interface Availabilities {
"availabilities": string[],
"length": number
}
observableオブジェクトからasyncパイプと*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>
関連
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] describe'という名前が見つかりません。テストランナー用の型定義をインストールする必要がありますか?
-
[解決済み] ts ES5/ES3の非同期関数やメソッドには、「Promise」コンストラクタが必要です。
-
[解決済み] Typescriptでインターフェースやクラスを使用する場合 [重複].
-
[解決済み] ユニオン型からインターセクション型への変換
-
[解決済み] Angular 2でアプリ起動時にサービスを実行する方法
-
[解決済み] 文字列ユニオンから文字列配列へ
-
[解決済み] Typescript のプリミティブ型:"number" と "Number" の違い(TSC は大文字と小文字を区別しない)?
-
[解決済み] タイプスクリプトのパイプ(|)の意味とは?
-
[解決済み] タイプスクリプト。カスタムタイプに対する typeof のチェック
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] describe'という名前が見つかりません。テストランナー用の型定義をインストールする必要がありますか?
-
[解決済み] ts ES5/ES3の非同期関数やメソッドには、「Promise」コンストラクタが必要です。
-
[解決済み] Typescriptでインターフェースやクラスを使用する場合 [重複].
-
[解決済み] Angular 2でアプリ起動時にサービスを実行する方法
-
[解決済み] 文字列ユニオンから文字列配列へ
-
[解決済み] tsc が `TS2307: Cannot find module` for a local file をスローします。
-
[解決済み] tsconfig.jsonのtargetは何のためにあるのですか?
-
[解決済み] Typescript のプリミティブ型:"number" と "Number" の違い(TSC は大文字と小文字を区別しない)?
-
[解決済み] モジュールと名前空間 - Import vs Require Typescript
-
[解決済み] TypeScript "this" scoping issue when called in jquery callback.