web-dev-qa-db-de.com

Wie erstellt man ein Verhaltensthema für ein Objekt und abonniert es für eine andere Komponente?

Ich habe ein Verhaltensthema in einer Serviceklasse erstellt.

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

Bei einer Komponente, die diesen Dienst importiert, habe ich dieses Verhaltensthema wie folgt abonniert: 

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

Ich kann jedoch keine genauen Daten im Verhaltenssubjekt abrufen. Bitte helfen.

Edit Ich habe vergessen zu erwähnen, dass ich ViewContainerRef verwendet habe, um meine Geschwister-Comnponent zu erstellen. Daher habe ich eine Antwort mit einigen Kommentaren zu meinem Thema hinzugefügt.

angulartypescriptobjectrxjsbehaviorsubject
4
Prabesh

Ich habe vergessen zu erwähnen, dass ich ViewContainerRef zum Erstellen einer gleichgeordneten Komponente verwendet habe.

Andere weise Verhaltenssubjekte eines Objekts funktionieren genauso wie mit number oder string. Ich habe @Input verwendet, um vorerst Daten an die Komponente zu senden.

0
Prabesh

bedienung

@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);
      });
  }

und dann können Sie es in Ihrer Komponente verwenden

export class DataComponent implements OnInit {

    public dataList$: Observable<IData[]>;

    constructor(public dataService: DataService) {}

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

und dein HTML

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