使用 ngIf 显示时，某些 HTML 元素未显示？答案

【问题标题】：Some HTML elements are not showing when displayed using an ngIf?使用 ngIf 显示时，某些 HTML 元素未显示？
【发布时间】：2021-10-16 18:52:42
【问题描述】：

我有两个带有不同路由器链接的按钮。根据 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 显然是在加载数据之前被命中的。有解决方法吗？

【问题讨论】：

您可以为此使用 class 并在 css 中显示隐藏。所以你的元素会在那里

标签： html angular typescript angular-ng-if

【解决方案1】：

我猜如果您查看控制台，您会在初始加载期间看到错误。页面加载时item 是否可能为空或未定义？如果是这样，您应该对这样的项目添加一个空检查。

*ngIf="item?.TrainingModuleCompleted"

另外，如果你换出的只是按钮文本，我会这样做而不是有两个按钮...
{{ item?.TrainingModuleCompleted ? 'View' : 'Select' }}

【讨论】：

【解决方案2】：

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

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

【讨论】：