html - 使用 ngIf 显示时，某些 HTML 元素未显示？

Question

我有两个带有不同路由器链接的按钮。根据 ngIf 的结果，每个都应该以不同的方式出现。但是，发生的情况是，在第一次加载页面时，这些按钮都不会加载，直到页面刷新（尽管已经加载了页面 - 等待数据加载）：

<ng-container *ngIf="moduleList">

...

     <button *ngIf="!item.TrainingModuleCompleted" mat-stroked-button [routerLink]="['training-modules-content-view', item.TrainingModuleId]" class="module-view">Select</button>
     <button *ngIf="item.TrainingModuleCompleted" mat-stroked-button [routerLink]="['training-modules-content-view', item.TrainingModuleId]" class="module-view">View</button>

...

</ng-container>

如上所示，将根据是否item.TrainingModuleCompleted为真显示不同的按钮。这个变量加载了moduleList.

这是加载之前的按钮（初始加载时）：

这是加载后的按钮（刷新页面后）：

ngIf 显然在加载数据之前就被击中了。有解决方法吗？

标签： htmlangulartypescriptangular-ng-if

Answer 1

如果您在“订阅”后加载数据，您可以这样做：

dataWS.subscribe(
    (data) => {
       //Called when success
     },
    (error) => {
       //Called when error
    }
  ).add(() => {
       //load the variable you want after
  });