angular - 为什么这个 ngif 不能与 bool 值一起正常工作？

Question

在我的模板中使用 ngif 语句时，我遇到了一个奇怪的问题。当条件为真时，该语句应该显示渲染“有效”图标。所以出于某种原因它根本不会渲染任何东西。我已经确认条件与我将条件输出到控制台时一样真实，它根据正确的日期显示为真或假。我在这里做错了什么吗？

detail.component.html

<br> Current Status: <span class="badge badge-success" *ngIf="isActive">Active</span>   

detail.component.ts

let isActive = false;
const validToDate = new Date(this.client.validTo);
if (validToDate.getTime() >= this.currentDate.getTime()) {
  isActive = true;
}
console.log(isActive);

有人能看到我在这里做错了什么吗？

Answer 1

如果在函数内部声明变量。它在该函数之外不可用。在函数外部声明变量，以便您可以在模板中访问该变量

试试这个

组件.ts

export class AppComponent{ 
    isActive = false;
    constructor(){
        const validToDate = new Date(this.client.validTo);
        if (validToDate.getTime() >= this.currentDate.getTime()) {
          this.isActive = true;
        }
        console.log(this.isActive);
    }
}

组件.html

<br> Current Status: <span class="badge badge-success" *ngIf="isActive">Active</span>