猿问

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

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


我的堆栈看起来像这样:


前端:角度

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 之前我将如何等待数据出现?



慕神8447489
浏览 157回答 3
3回答

繁花如伊

嗯,您确定您的 API 在调用 GET 请求之前完成了 POST 请求吗?我会建议两件事之一:this.getMeetings();在您的 POST 方法响应之后而不是在您关闭对话框时调用您的权利。如果您要添加一个新会议,为什么不简单地将该会议添加到会议列表中呢?您可以在 POST 响应之后使用来自服务器的数据执行此操作,也可以直接使用插入到表单中的值执行此操作

慕森王

我会在 post 请求回调中添加 close modal 函数,这样在会议保存在 db 之前模态不会关闭。像这样的东西。this.httpClient.post(this.apiUrl, data).subscribe((data) => {&nbsp; console.log('Event created');&nbsp; this.dialogRef.close()});更好的选择是查看 rxjs 主题。

长风秋雁

添加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; }
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答