javascript — * ngFor обновляется до получения новых данных

* ngFor обновляется до получения новых данных

В настоящее время я работаю над «Списком собраний», где пользователь может создавать новые собрания и присоединяться к другим собраниям.

Мой стек выглядит так:

  • FrontEnd: угловой
  • API: Облачные функции Firebase
  • БД: Firebase БД реального времени

    Для списка собраний я использую эту разметку, поскольку она должна отображать список каждого собрания с его названием.
 {amp}lt;div class="container"{amp}gt; {amp}lt;h2{amp}gt;Aktuelle Meetings{amp}lt;/h2{amp}gt; {amp}lt;div class="cardContainer" *ngFor="let meeting of meetings"{amp}gt; {amp}lt;div class="meeting"{amp}gt; {amp}lt;div class="meetingText"{amp}gt; {amp}lt;p class="titleText"{amp}gt;{{ meeting[1].title }}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="createMeeting"{amp}gt; {amp}lt;button class="floating" mat-fab (click)="openCreateMeeting()"{amp}gt; {amp}lt;mat-icon{amp}gt;add{amp}lt;/mat-icon{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

openCreateMeeting() открывает MaterialDialog (угловой материал), где пользователь может ввести некоторую основную информацию о собрании.

  openCreateMeeting(): void { const dialogConfig = new MatDialogConfig(); dialogConfig.autoFocus = true; const dialogRef = this.dialog.open(NewMeetingComponent, dialogConfig); dialogRef.afterClosed().subscribe((data) ={amp}gt; { 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) ={amp}gt; { console.log('Event created'); }); } 

Однако, когда я создаю новое событие, новое событие не появляется в списке. Он обновляется до того, как новый элемент возвращается из API / DB. Таким образом, новое событие появляется только когда я обновляю страницу или создаю следующий элемент.

GIF проблемы

Теперь я хочу как-то дождаться завершения вызова API, прежде чем *ngFor мой *ngFor .

Вопрос: Итак, как бы я ожидал появления данных перед повторным рендерингом * ngFor?


Что я пробовал:

Я попытался включить changeDetector.markForCheck() .

 dialogRef.afterClosed().subscribe((data) ={amp}gt; { 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 -{amp}gt; ChangeDetectorRef]: NullInjectorError: No provider for ChangeDetectorRef! NullInjectorError: StaticInjectorError(AppModule)[MeetingListComponent -{amp}gt; ChangeDetectorRef]: StaticInjectorError(Platform: core)[MeetingListComponent -{amp}gt; 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, вероятно, получает чек, но новых данных еще нет.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector