*ngFor 在获取新数据之前正在更新

Question

我目前正在处理“会议列表”，用户可以在其中创建新会议并加入其他会议。我的堆栈看起来像这样：前端：角度API：Firebase 云函数DB：Firebase 实时数据库对于会议列表，我正在使用此标记，因为它应该使用其名称呈现每个会议的列表。<div class="container">  <h2>Aktuelle Meetings</h2>  <div class="cardContainer" *ngFor="let meeting of meetings">    <div class="meeting">      <div class="meetingText">        <p class="titleText">{{ meeting[1].title }}</p>      </div>    </div>  </div>  <div class="createMeeting">    <button class="floating" mat-fab (click)="openCreateMeeting()">      <mat-icon>add</mat-icon>    </button>  </div></div>openCreateMeeting() 正在打开一个 MaterialDialog（Angular Material），用户可以在其中输入有关会议的一些基本信息。  openCreateMeeting(): void {    const dialogConfig = new MatDialogConfig();    dialogConfig.autoFocus = true;    const dialogRef = this.dialog.open(NewMeetingComponent, dialogConfig);    dialogRef.afterClosed().subscribe((data) => {      this.getMeetings();    });  }getMeeting() 发送 API 调用以从数据库获取会议。当用户创建一个新事件时，它会触发我的“apiService”，其中包括创建新会议的功能。 public postMeeting(    eventTitle,    eventDescription,    eventLocation,    eventDate,    eventOwner  ): void {    console.log('creating an event ...');    const data = {      title: eventTitle,      description: eventDescription,      location: eventLocation,      date: eventDate,      owner: eventOwner,      participants: eventOwner,    };    this.httpClient.post(this.apiUrl, data).subscribe((data) => {      console.log('Event created');    });  }但是，当我创建新事件时，新事件不会显示在列表中。它会在新项目从 API/DB 返回之前刷新。因此，新事件仅在我刷新页面或创建下一个项目时显示。我现在想做的是在刷新我的*ngFor.问题：那么在重新渲染 *ngFor 之前我将如何等待数据出现？

Answer 1

嗯，您确定您的 API 在调用 GET 请求之前完成了 POST 请求吗？我会建议两件事之一：

• this.getMeetings();在您的 POST 方法响应之后而不是在您关闭对话框时调用您的权利。

• 如果您要添加一个新会议，为什么不简单地将该会议添加到会议列表中呢？您可以在 POST 响应之后使用来自服务器的数据执行此操作，也可以直接使用插入到表单中的值执行此操作

Answer 2

我会在 post 请求回调中添加 close modal 函数，这样在会议保存在 db 之前模态不会关闭。像这样的东西。

this.httpClient.post(this.apiUrl, data).subscribe((data) => {

  console.log('Event created');

  this.dialogRef.close()

});

更好的选择是查看 rxjs 主题。

Answer 3

添加private cdr: ChangeDetectorRef您的构造函数，然后在this.cdr.markForCheck();填充this.meetings 之后在您的 getMeetings 函数中添加。

例子：

getMeetings() {

        ....

        ....

        // response API service

        this.meetings = response;

        this.cdr.markForCheck();

    }