const变量Temp值失效，Angular *ngIf控制mat-icon显示异常求助

核心问题 #

你在服务里定义的const Temp是局部变量，作用域只限于当前的if/else代码块，代码执行完就会被销毁，组件的HTML模板根本无法访问到这个变量，自然*ngIf="Temp===0"的逻辑会失效。

解决步骤 #

1. 调整服务逻辑，返回状态值

修改服务中的方法，把Temp对应的状态作为返回值的一部分，而不是用局部变量：

checkWidgetValidity(dashboardConfiguration: any) {
  const results = new Map();
  let tempStatus = 1; // 默认状态为1

  // 用flatMap简化嵌套过滤，同时收集无效组件
  const invalidScoreWidgets = dashboardConfiguration.widgets.flatMap(w => 
    w.widgets.filter(wid => {
      if (wid.extension === WidgetExtension.Score) {
        if (this.IsInvalidValidScoreWidget(wid)) {
          wid.isValid = false;
          tempStatus = 0; // 检测到无效组件，设置状态为0
          return true;
        } else {
          tempStatus = 1;
          return false;
        }
      }
      return false;
    })
  );

  if (invalidScoreWidgets.length > 0) {
    results.set('widget', false);
    results.set('valid', false);
  }

  // 返回结果和状态值
  return { results, tempStatus };
}

2. 在组件类中定义可绑定的属性

在你的组件.ts文件里，添加一个公共属性用来存储状态：

// 组件类中定义
tempStatus: number = 1; // 默认初始值为1

3. 调用服务并更新组件属性

在组件中调用服务方法，把返回的状态赋值给组件属性：

// 假设你在组件的某个方法里调用服务
processDashboardConfig(dashboardConfig: any) {
  const { results, tempStatus } = this.yourService.checkWidgetValidity(dashboardConfig);
  this.tempStatus = tempStatus;
  // 处理results的逻辑...
}

4. 修改模板绑定

把HTML模板里的Temp换成组件的tempStatus：

<li *ngIf="licensePackage && licensePackage.id===100">
  <a routerLink="kpi-view" routerLinkActive="active">  
    <div class="tw-w-3 tw-float-right -tw-mt-3" *ngIf="tempStatus===0">
      <mat-icon svgIcon="alerts_outlined" class="tw-max-w-3" aria-hidden="true"></mat-icon>
    </div>
    {{'menu_Summary_View' | translate}}
  </a>
</li>

关键说明 #

• 模板中能绑定的变量必须是组件类的公共属性，局部变量或服务里的局部变量无法直接被模板访问。
• 如果需要跨组件共享状态，可以考虑把tempStatus做成服务里的可观察对象（BehaviorSubject），但如果只是单个组件使用，直接用组件属性更简单。

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