Angular 在 View 呈现之前设置 Array[]

Question

目前我正在尝试找出一种方法来填充这个数组 events: CalendarEvent[] = [];在 View 呈现之前。当我试图从我拥有的一些数据库条目中填充日历时，但是我已经将数据提取到一个函数中，然后我在另一个函数中分配。问题是我似乎无法在渲染之前让数组更新，但可以通过按钮单击事件后记轻松更新它。

所以我深入研究了不同的方法来解决这个问题，我尝试过设置加载器而不是在函数完成之前使用 ngIf 进行渲染，但是当涉及到 Angular 时，很多这对我来说仍然是一个错误，所以我不确定在这方面有哪些可能的方法。

据我所知，目前我的服务返回条目的方式只是返回一个 promise 而不是值，所以 View 没有数据，所以我知道有一些方法可以让我操纵组件状态，但是有一些方法可以实现这一点，而无需在渲染后刷新组件

我认为这样的事情会起作用，但据我了解，Angular 中的 Async 与 c#/Xamarin 等中的异步不同

async ngOnInit(){
    await this.getEntries();
    await this.setCalendar();
  }

我获取条目:

  getEntries(){
    this.entryservice.getAventry().subscribe(data => {
      this.entries = data.map(e => {
        return {
          id: e.payload.doc.id,
          ...e.payload.doc.data() as {}
        } as Entrymodel;
      })
    });
    console.log("Get Done");
  }

然后我将它们推送到日历数组:

 setCalendar(){
     this.entries.forEach(element => {
       
      let start = element.startDate.year + "-" + element.startDate.month + "-" + element.startDate.day;
      let end = element.endDate.year + "-" + element.endDate.month + "-" + element.endDate.day;

      var startDate = new Date(start); 
      var endDate = new Date(end); 
   
      var title = element.info + " " + element.surname;
       this.events = [
        ...this.events,
        {
          title: title ,
                                                                                                                                                       
          start: startOfDay(startDate),
          end: endOfDay( endDate),
          color: {
            primary: element.color,
           secondary: element.color
          },
          draggable: false,
          resizable: {
            beforeStart: false,
            afterEnd: false,
          },
          cssClass: element.surname,
        },
      ];
    
    });

日历库 StackBlitz 大致相同 StackBlitz

请注意:整个数组是我从数据库获取数据的地方，问题是 events: CalenderEvent[] = []; 没有被填充在 View 渲染之前所以日历是空的并且当前填充它的唯一方法是在初始渲染之后使用单击事件或类似的东西，我已经尝试了以下答案它们对我不起作用

一个我好像忘记补充的小提示:

我使用的变量:

  entries: Entrymodel[] = [];
 events: CalendarEvent[] = [];

入口模型:

export class Entrymodel {
    id: string;
    surname: string;
    color: string;
    startDate: Startdate;
    endDate: Enddate;
    info: string;
    status?: string;
    inbet?: Inbetween[];
    editing?: boolean;
}

export class Startdate{
    day: string;
    month: string;
    year: string;
}

export class Enddate{
    day: string;
    month: string;
    year: string;
}

export class Inbetween{
    day: string;
    month: string;
    year: string;
}

我正在尝试获取条目，因为它们包含需要插入事件数组以显示在日历上的日期

Answer 1

当智能组件和dumb组件有用时，将此问题视为一个很好的例子。

正如您自己写的那样 - 管理状态在这里很重要，如果您将组件分成两部分 - 智能组件和dumb组件，这将非常容易。

智能组件将准备所有数据，而dumb组件将渲染它。

例子

智能组件.ts:

  entries: Observable<any>;
  loading: false;

  getEntries(){
    this.loading = true;
    this.entries = this.entryservice.getAventry().pipe(
      map(data => {
        return data.map(e => {
          return {
            id: e.payload.doc.id,
            ...e.payload.doc.data() as {}
          } as Entrymodel;
        })
      }),
      map(this.setCalendar),
      finalise(() => this.loading = false)
    );
  }

 setCalendar(entries){
     return entries.forEach(element => {
       
      let start = element.startDate.year + "-" + element.startDate.month + "-" + element.startDate.day;
      let end = element.endDate.year + "-" + element.endDate.month + "-" + element.endDate.day;

      var startDate = new Date(start); 
      var endDate = new Date(end); 
   
      var title = element.info + " " + element.surname;
       this.events = [
        ...this.events,
        {
          title: title ,
                                                                                                                                                       
          start: startOfDay(startDate),
          end: endOfDay( endDate),
          color: {
            primary: element.color,
           secondary: element.color
          },
          draggable: false,
          resizable: {
            beforeStart: false,
            afterEnd: false,
          },
          cssClass: element.surname,
        },
      ];
    
    });

智能组件.html:

<app-dumb-component
  [entries]="entries | async"
  [loading]="loading"
></app-dumb-component>

dumb组件.ts:

@Input('entries') entries: any[];
@Input('loading'): boolean;

dumb.component.html:

<div *ngIf="!loading; else loading"> ... </div>

<ng-template #loading>
  // spinner
</ng-template>

附:在这里为了简单起见，我将状态存储在一个智能组件中(虽然我们通常为此使用存储)并且方法通常只是一个例子，因为这的整个架构应该确定数据如何来回流动。

编辑

我刚刚注意到您正在使用实时数据库，对吗？ (可能是 Firebase - 会在您的帖子中添加标签。如果不是 Firebase，请更改它)。这改变了概念。使用像 SQL 这样的 普通 数据库，当您进行 HTTP 调用时，它会返回您 一次 - 响应或错误。使用实时数据库时，您会得到一个流，如网络套接字。这意味着您必须将其视为一个流，因为它可以在未来的任何时间为您返回值。

那么您问的是什么 - 您需要根据 entries 流上的结果获取事件。该流可以随时插入值(value)。那么您可以做什么 - 将 entries 映射到 events:

智能组件.ts:

  entries: Observable<any>;
  loading: false;

  getEntries(){
    this.loading = true;
    this.events = this.entryservice.getAventry().pipe(
      map(data => {
        return data.map(e => {
          return {
            id: e.payload.doc.id,
            ...e.payload.doc.data() as {}
          } as Entrymodel;
        })
      }),
      map(this.setCalendar),
      finalise(() => this.loading = false)
    );
  }

 setCalendar(entries){
     return entries.map(element => {
       
      let start = element.startDate.year + "-" + element.startDate.month + "-" + element.startDate.day;
      let end = element.endDate.year + "-" + element.endDate.month + "-" + element.endDate.day;

      var startDate = new Date(start); 
      var endDate = new Date(end); 
   
      var title = element.info + " " + element.surname;
       return {
          title: title ,
                                                                                                                                                       
          start: startOfDay(startDate),
          end: endOfDay( endDate),
          color: {
            primary: element.color,
           secondary: element.color
          },
          draggable: false,
          resizable: {
            beforeStart: false,
            afterEnd: false,
          },
          cssClass: element.surname,
        },
      ];
    
    });

setCalendar 函数中的更改 - entries.forEach 更改为 entries.map 和 this.events = [ ...this.events, 返回

智能组件.html:

<app-dumb-component
  [events]="events | async"
  [loading]="loading"
></app-dumb-component>

此时，loading 属性将仅对第一次连接有用，因为稍后它会立即发出。