web-dev-qa-db-ja.com

オブジェクトの動作サブジェクトを作成し、別のコンポーネントでサブスクライブする方法は？

サービスクラスで動作サブジェクトを作成しました。

    public personObject: BehaviorSubject<any> = new BehaviorSubject<any>({
                                               personId: 1,
                                               name: 'john doe'
                                               });

このサービスをインポートするコンポーネントで、この動作サブジェクトを次のようにサブスクライブしました：

`        this._subscription.add(
            this._bankService.personObject.subscribe(data => {
                this.personObject = data;
                console.log(data);
            })
        );`

しかし、私は行動の主題で正確なデータセットを取得することができません。助けてください。

編集私はViewContainerRefを使用して兄弟コンポーネントを作成したことを忘れていました。だから私は私の問題についてのいくつかのコメントで回答を追加しました。

angulartypescriptobjectrxjsbehaviorsubject
5
Prabesh

ViewContainerRefを使用して兄弟コンポーネントを作成していたことを忘れていましたが、ViewContainerRefを使用して作成されたコンポーネントでは動作サブジェクトが同じように機能しないことがわかりました。

オブジェクトのその他の賢明な振る舞いサブジェクトは、数値または文字列とまったく同じように機能します。ここでは、@ Inputを使用してデータをコンポーネントに送信しました。

0
Prabesh

サービス

@Injectable()
export class DataService {

  private _dataListSource: BehaviorSubject<IData[]> = new BehaviorSubject([]);
  dataList: Observable<IData[]> = this._dataListSource.asObservable().distinctUntilChanged();

  getDataList(): Observable<any> {
      return this.httpService.get('/data').map(res => {
          this._dataListSource.next(res);
      });
  }
}

TSファイル

export class DataComponent implements OnInit {

    public dataList$: Observable<IData[]>;

    constructor(public dataService: DataService) {}

    ngOnInit() {
        this.dataList$ = this.dataService.dataList;
        this.dataService.getDataList().subscribe();
    }
}

HTMLファイル

<div *ngIf="dataList$ | async; let dataList; ">
    <div *ngFor="let data of dataList">
        {{ data | json}}
    </div>
</div>
8
Dmitry Grinko