Question

在Angular应用的ngOnInit（）中，我正在订阅Observable，如下所示：

ngOnInit() {
    this.loadArtistTable();
    }

loadArtistTable(): void {
    this._artistService.getArtists().subscribe(
        (artistList) => this.artists = artistList,
        (err) => console.log(err)
    );
}

这很好，因为正在检索艺术家的详细信息并将其显示在表格中：

<tr *ngFor="let artist of artists">
    <td>{{artist.fullName}}</td>
    <td>{{artist.email}}</td>
    <td>{{artist.phone}}</td>
    <td>{{artist.contactPreference}}</td>
    <td><button class="btn btn-primary" (click)="editButtonClick(artist.id)">Edit</button></td>
</tr>

然后我有了一个用于更新艺术家详细信息的表格。更新详细信息并单击“保存”后，将发送一个PUT请求，并且成功更新了Artist。

刷新浏览器时，将显示新的Artist详细信息。

现在，当我单击“保存”按钮时，我试图刷新Artist表。这是单击“保存”时执行的代码：

onSubmit(): void {
    this.mapFormValuesToEmployeeModel();
    this._artistService.updateArtist(this.artist).subscribe(
        () => console.log('artist updated successfully'),
        (err: any) => console.log(err)
    );
    this.loadArtistTable();
}

如上所述，正在更新艺术家，但是单击该按钮时不会在表中填充最新数据。

有人可以告诉我为什么我的 onSubmit（）函数中没有执行 this.loadArtistTable（）; 以及可能的解决方案吗？非常感谢。

Answer 1

通过将 this.loadArtistTable（）放在 subscribe 回调中来解决此问题，如下所示：

onSubmit(): void {
    this.mapFormValuesToEmployeeModel();
    this._artistService.updateArtist(this.artist).subscribe(
      () => (console.log('artist updated successfully'), this.loadArtistTable()),
      (err: any) => console.log(err)
    );
}

—————————————— 警告：对于每个更新记录，您正在调用1000条记录的列表，当记录增加时，这是一个负载，因此，当您更新记录时，必须使用splice

从列表中更新特定记录。

如何多次订阅可观察的内容？

1 个答案: