Angular中*ngIf判断对象属性失效问题求助

问题根源1：属性名大小写不匹配 #

JavaScript/TypeScript 是大小写敏感语言，你在 HTML 中写的是 !row.widgetAccess.isvalid（小写v），但 TypeScript 代码里定义的属性是 isValid（大写V），这直接导致模板无法正确读取属性值，*ngIf 判断逻辑失效。

问题根源2：TypeScript 逻辑错误 #

在 TS 代码的 filter 回调里，你用了赋值运算符 = 而非比较运算符 ===：

widget.widgets.filter(wA => wA.isValid = false)

这行代码会把所有 wA.isValid 强制设为 false，而不是筛选出原本就无效的项，后续的 widget.isValid = false 逻辑也因此出错。

修复方案 #

1. 修正 HTML 中的属性名

把模板里的 isvalid 改为 isValid：

<div class="tw-w-3 tw-float-right -tw-mt-3" *ngIf="!row.widgetAccess.isValid">
  <mat-icon svgIcon="alerts_outlined" class="tw-max-w-3" aria-hidden="true">
  </mat-icon>
</div>

2. 修正 TypeScript 中的逻辑错误

将赋值运算符改为严格比较，同时用更高效的 some 方法替代 filter（只需判断是否存在无效项，无需生成新数组）：

makeRowData(): void {
  this.rowData = [];
  this.dynamicGroups.forEach(group => {
    this.rowData.push({
      dynamicGroup: group,
      widgetAccess: {
        dynamicGroupUID: group.uId,
        hasAccess: false,
        widgets: [],
        isValid: true,
      } as WidgetAccess
    });
  });

  this.dashboardConfiguration.widgets?.forEach(widget => {
    this.rowData.forEach(widgetGroup => {
      if (widgetGroup.dynamicGroup.uId === widget.dynamicGroupUID) {
        widgetGroup.widgetAccess = widget;
      }
      // 修正比较运算符，并用some提升性能
      if (widget.widgets.some(wA => wA.isValid === false)) {
        widget.isValid = false;
      };
    });
  });
}

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