Angular满足ngIf条件时如何修改Typescript布尔类型变量

你有几种可选的实现方式，按使用场景选择即可：

• 方案1：模板内直接赋值（适合简单逻辑）
  Angular 模板表达式支持逻辑与短路执行规则，condition1 为真时会自动执行后续的赋值语句，不需要额外修改TS文件：

<!-- 注意你原代码里第二个*ngIf的双引号没闭合，记得补上 -->
<ng-container *ngIf="condition1 && (showTable2 = false)">
 //show table1
</ng-container>

<ng-container *ngIf="showTable2">
 //show table2
</ng-container>

• 方案2：调用组件方法处理（适合有扩展逻辑的场景）
  如果后续命中condition1时还有其他逻辑要处理，建议封装成TS方法调用，先修改Typescript代码：

showTable2 = true;
// 假设condition1是你组件中已经定义的判断变量
condition1: boolean;

checkCondition1(): boolean {
  if (this.condition1) {
    this.showTable2 = false;
    // 可在此处追加其他要执行的逻辑
    return true;
  }
  return false;
}

再修改模板调用方法即可：

<ng-container *ngIf="checkCondition1()">
 //show table1
</ng-container>

<ng-container *ngIf="showTable2">
 //show table2
</ng-container>

• 无额外变量的优化方案
  如果两个表格是互斥展示的逻辑，完全不需要额外维护showTable2变量，直接用*ngIf的else语法更简洁易维护：

<ng-container *ngIf="condition1; else table2Tpl">
 //show table1
</ng-container>

<ng-template #table2Tpl>
 //show table2
</ng-template>

内容的提问来源于stack exchange，提问作者cluis92