如何让组件在 html 之前完成加载

Question

所以我有这个带有图表的仪表板页面和一些带有数据的卡片。检索数据的函数在 ngOnInit() 中，但问题是当页面加载时，数据显示为 0。如果我单击图表或其他内容，则数据会加载。无论如何可以直接获取页面加载时的数据？我尝试设置一个布尔值，它将在 nginit 结束时变为真，但它仍然不起作用。

<div *ngIf="isLoaded">
Page here
</div>

这是 ts 文件。

export class DashboardAgentComponent implements OnInit {

totalAssigned=0;
totalAssignedHigh=0;
totalAssignedMed=0;
totalAssignedLow=0;
totalPending=0;
totalPendingHigh=0;
totalPendingMed=0;
totalPendingLow=0;
totalUnassigned=0;
public allTags$ = new BehaviorSubject<Tag[]>([]);
public threeDaysPending = 0;
public sevenDaysPending =0;
public fourteenDaysPending = 0;

public threeDaysAssigned = 0;
public sevenDaysAssigned =0;
public fourteenDaysAssigned = 0;
public isLoaded : boolean =  false;


ngOnInit() :void{
this.getTotalAssigned();

}

public trackByFn = (i: number, tag: Tag) => tag.id;



getTotalAssigned()
{
  this.mailboxTags.getTotalPending().subscribe((tags: Tag[]) => {
    console.log(tags);
    // this.allTags$.next(tags);
    for (let index = 0; index < tags.length; index++) {
      if(tags[index].name == 'pending' && tags[index].type=='view')
      {
        this.totalPending = tags[index].tickets_count;
      }

      else if(tags[index].name == 'unassigned')
      {
        this.totalUnassigned = tags[index].tickets_count;
      }

      else if(tags[index].name == 'assigned'&& tags[index].type=='view')
      {
        this.totalAssigned = tags[index].tickets_count;
      }
    }
 });
this.getPendingTickets();

}

getPendingTickets()
{
this.mailboxTags.getPendingHighTickets().subscribe((res: any) => {
  let currentDate: any = new Date();
  
    for (let index = 0; index < res.pagination.data.length; index++) {
      if(res.pagination.data[index].status=="pending")
      {
        let createdDate: any = new Date(res.pagination.data[index].created_at);
        var diffDays:any = Math.floor((currentDate - createdDate) / (1000 * 60 * 60 * 24));

        if(diffDays>3 && diffDays<7)
        {
          this.threeDaysPending++;
        }

        else if(diffDays>=7 && diffDays<14)
        {
          this.sevenDaysPending++;
        }

        else if(diffDays>=14)
        {
          this.fourteenDaysPending++;
        }
      }
    }

    for (let index = 0; index < res.pagination.data.length; index++) {
      if(res.pagination.data[index].status=="assigned")
      {
        let createdDate: any = new Date(res.pagination.data[index].created_at);
        var diffDays:any = Math.floor((currentDate - createdDate) / (1000 * 60 * 60 * 24));

        if(diffDays>3 && diffDays<7)
        {
          this.threeDaysAssigned++;
        }

        else if(diffDays>=7 && diffDays<14)
        {
          this.sevenDaysAssigned++;
        }

        else if(diffDays>=14)
        {
          this.fourteenDaysAssigned++;
        }
      }
    }
   
    this.isLoaded =  true;
    
    
  
  
 });
 }


constructor(private breakpointObserver: BreakpointObserver, public mailboxTags: MailboxTagsService) {}

}

基本上所有将使用的数据都在 ngOnInit 函数中。

这是html。它不完整，但其他类似。

<div class="grid-container"  *ngIf="isLoaded   == true">
<h1 class="mat-h1">Dashboard</h1>
<mat-grid-list cols="3" rowHeight="550px" colWidth="100px">
  <mat-grid-tile   class="grid-tile"  [colspan]="1" [rowspan]="1">
    <ng-container >
      <mat-card class="dashboard-card" >
        <mat-card-header>
          <mat-card-title>
            Unassigned
            <button mat-icon-button class="more-button" 
        [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item>Expand</button>
              <button mat-menu-item>Remove</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div>{{totalUnassigned}}</div>
        </mat-card-content>
      </mat-card>
    </ng-container>
   </mat-grid-tile>
   </mat-grid-list>
   </div>

因此，totalUnassigned 为 0，除非我打开我的 matmenu 然后数据会更新。

Answer 1

我尝试设置一个布尔值，它将在 nginit 结束时变为真 但是还是不行。

您不能将isLoaded=true 设置在ngOnInit() 的末尾。这并不能确保所有数据都已成功加载。

我很确定您错过了异步编程的基础知识，您必须在 get 调用的回调函数中进行任何更改。

ngOnInit() {
   ...
   ..asynchronousCall...
   ...

  this.isLoaded=true
} 

上述情况将不起作用。

  ngOnInit() {
       ...
       ..asynchronousCall.subscribe( e => {
          this.isLoaded=true
        });
       ...
    } 

上述情况将起作用，因为当异步回调函数 get 执行并且已从后端成功获取数据时，布尔值将被更新

编辑： 在您发布所有代码后，我对您的错误的第一次估计是正确的。

您可以通过以下方式解决此问题 在getTotalAssigned() 的订阅中移动方法调用this.getPendingTickets();。这样，只有在提取了 totalAsigned 票证后，才会提取待处理票证。

还将this.isLoaded = true; 移动到getPendingTickets() 的订阅中

像这样重构代码后，您将实现 this.isLoaded 仅在获取 TotalAsigned 并获取 pendingTickets 时才变为真。

Answer 2

我已经使用 Angular Resolvers 解决了这个问题。由于某种原因，单独的 ngIf 方法不起作用。这是我更新的代码：

  constructor(private breakpointObserver: BreakpointObserver, public mailboxTags: MailboxTagsService, private _route: ActivatedRoute) {
 this.respond = this._route.snapshot.data['tickets'];
 this.tag =this._route.snapshot.data['tag'];
 this.userID = this._route.snapshot.data['id'];

let currentDate: any = new Date();
  
    for (let index = 0; index < this.respond.pagination.data.length; index++) {
      if(this.respond.pagination.data[index].assigned_to == this.userID)
      {
        if(this.respond.pagination.data[index].status=="pending")
      {
        let createdDate: any = new Date(this.respond.pagination.data[index].created_at);
        var diffDays:any = Math.floor((currentDate - createdDate) / (1000 * 60 * 60 * 24));

        if(diffDays>3 && diffDays<7)
        {
          this.threeDaysPending++;
        }

        else if(diffDays>=7 && diffDays<14)
        {
          this.sevenDaysPending++;
        }

        else if(diffDays>=14)
        {
          this.fourteenDaysPending++;
        }
      }
      }
      
    }

    for (let index = 0; index < this.respond.pagination.data.length; index++) {
      if(this.respond.pagination.data[index].assigned_to == this.userID){
        if(this.respond.pagination.data[index].status=="assigned")
      {
        let createdDate: any = new Date(this.respond.pagination.data[index].created_at);
        var diffDays:any = Math.floor((currentDate - createdDate) / (1000 * 60 * 60 * 24));

        if(diffDays>3 && diffDays<7)
        {
          this.threeDaysAssigned++;
        }

        else if(diffDays>=7 && diffDays<14)
        {
          this.sevenDaysAssigned++;
        }

        else if(diffDays>=14)
        {
          this.fourteenDaysAssigned++;
        }
      }
      }
    }  

    for (let index = 0; index < this.tag.length; index++) {
      if(this.tag[index].name == 'pending' && this.tag[index].type=='view')
      {
        this.totalPending = this.tag[index].tickets_count;
      }

      else if(this.tag[index].name == 'unassigned')
      {
        this.totalUnassigned = this.tag[index].tickets_count;
      }

      else if(this.tag[index].name == 'assigned'&& this.tag[index].type=='view')
      {
        this.totalAssigned = this.tag[index].tickets_count;
      }
    }
    this.isLoaded=true;
   }