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

Question

我目前正在开发一个“ session 列表”，用户可以在其中创建新 session 并加入其他 session 。

我的堆栈看起来像这样:

• 前端:Angular
• API:Firebase 云函数
• 数据库:Firebase 实时数据库

  ---

  对于 session 列表，我使用此标记，因为它应该呈现每个 session 及其名称的列表。

<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)，用户可以在其中输入有关 session 的一些基本信息。

  openCreateMeeting(): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    const dialogRef = this.dialog.open(NewMeetingComponent, dialogConfig);

    dialogRef.afterClosed().subscribe((data) => {
      this.getMeetings();
    });
  }

getMeeting() 发送 API 调用以从数据库获取 session 。

---

当用户创建新事件时，它会触发我的“apiService”，其中包括创建新 session 的功能。

 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 返回之前刷新。因此，只有当我刷新页面或创建下一个项目时，新事件才会出现。

我现在想做的是以某种方式等待 API 调用完成，然后再刷新我的 *ngFor。

问题:那么在重新呈现 *ngFor 之前，我该如何等待数据出现？

---

我尝试了什么:

我试图包含 changeDetector.markForCheck()。

dialogRef.afterClosed().subscribe((data) => {
    this.getMeetings();
    this.changeDetector.markForCheck();
});

将 changeDetector 直接包含到我的 getMeetings() 中。

public getMeetings() {
    const meetings = this.httpClient.get(this.apiUrl);
    this.changeDetector.markForCheck();
    return meetings;
}

这并没有解决问题，但我的应用程序崩溃了，并给了我这个错误:

  StaticInjectorError(Platform: core)[MeetingListComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
NullInjectorError: StaticInjectorError(AppModule)[MeetingListComponent -> ChangeDetectorRef]: 
  StaticInjectorError(Platform: core)[MeetingListComponent -> ChangeDetectorRef]: 
    NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.get (core.js:778)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveNgModuleDep (core.js:26403)
    at NgModuleRef_.get (core.js:27491)
    at injectInjectorOnly (core.js:657)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

这没有做任何事情，因为 angular 可能正在检查但新数据还没有。

Answer 1

嗯，您确定您的 API 在调用 GET 请求之前完成了 POST 请求吗？我会建议 2 件事中的 1 件事:

• 在您的 POST 方法响应后立即调用您的 this.getMeetings();，而不是在您关闭对话框时调用。
• 如果您要添加新 session ，为什么不直接将该 session 添加到 session 列表中呢？您可以在 POST 响应后使用来自服务器的数据或直接使用表单中插入的值来执行此操作