如何修改angular模板中的订阅结果？

Question

我有一个 observable this.result$，我在 template 中订阅了它。例如，结果是- [{id : "1", value: "test"}]。我怎样才能向它添加新对象，使其变成这样 - [{id : "1", value: "test"},{id : "2", value: "new"}]

<mat-form-field *ngIf="result$ | async">
  <mat-select [compareWith] = "compareFn">
    <mat-option *ngFor = "let item of result$ | async" [value]="item">
       {{item.value}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

我建议您为此更改代码。例如，在您的 .ts 文件中：

objectList: any[] = [];

ngOnInit(): void {
   this.result$.subscribe(r => {
         this.objectList.push(r);
    });
}

addNewObject(newObject: any): void {
   this.objectList.push(newObject);
}

在你的 .html 文件中使用这个。

<mat-form-field *ngIf="objectList && objectList.lenght > 0">
  <mat-select [compareWith] = "compareFn">
    <mat-option *ngFor = "let item of objectList" [value]="item">
       {{item.value}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 2

您可以像这样在可观察数组中添加新元素

this.result$ = this.result$.pipe(map((r) => [...r, { id: "2", value: "new" }]));

如何修改angular模板中的订阅结果？

How to modify subscribe result in angular template?

observable

typescript

angular-material

angular