*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) => {&nbsp; console.log('Event created');&nbsp; this.dialogRef.close()});更好的选择是查看 rxjs 主题。

Answer 3

添加private cdr: ChangeDetectorRef您的构造函数，然后在this.cdr.markForCheck();填充this.meetings 之后在您的 getMeetings 函数中添加。例子：getMeetings() {&nbsp; &nbsp; &nbsp; &nbsp; ....&nbsp; &nbsp; &nbsp; &nbsp; ....&nbsp; &nbsp; &nbsp; &nbsp; // response API service&nbsp; &nbsp; &nbsp; &nbsp; this.meetings = response;&nbsp; &nbsp; &nbsp; &nbsp; this.cdr.markForCheck();&nbsp; &nbsp; }