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

问题描述

我目前正在制作“会议列表”，用户可以在其中创建新会议并加入其他会议。

我的堆栈看起来像这样：

前端：角
API：Firebase 云函数
数据库：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 中返回之前刷新。因此，仅当我刷新页面或创建下一个项目时才会显示新事件。

我现在想要做的是以某种方式等待 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 可能正在接受检查，但新数据还没有。

标签： javascripthtmlangulartypescriptasynchronous

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

问题描述

解决方案

推荐阅读