Angular 角度：如何处理角度材质表中的空值

我想根据状态应用css类。例如：如果状态为

Pass

，css类

.dot.Pass

应在html中分配给

span

。如果api返回

状态：null

，如何处理

null

值。我收到此错误消息

错误类型错误：无法读取未定义的属性“css”

。我相信这是由状态中的空值引起的

状态.常数.ts

export const STATUSES_KEY = {
  notChecked: 'NOT_CHECKED',
  pass: 'PASS',
  na: 'NA',
  fail: 'FAIL'
};

export const STATUS_STYLING = {
  [STATUSES_KEY.notChecked]: {
    text: 'Not Checked',
    css: 'dot notChecked',
  },
  [STATUSES_KEY.pass]: {
    text: 'Pass',
    css: 'dot pass',
  },
  [STATUSES_KEY.fail]: {
    text: 'Fail',
    css: 'dot fail',
  }
};

  generateStatusClass(status: string) {
    if (status) {
      return STATUS_STYLING[status].css;
    } else {
      return;
    }
  }

应用程序ts

export const STATUSES_KEY = {
  notChecked: 'NOT_CHECKED',
  pass: 'PASS',
  na: 'NA',
  fail: 'FAIL'
};

export const STATUS_STYLING = {
  [STATUSES_KEY.notChecked]: {
    text: 'Not Checked',
    css: 'dot notChecked',
  },
  [STATUSES_KEY.pass]: {
    text: 'Pass',
    css: 'dot pass',
  },
  [STATUSES_KEY.fail]: {
    text: 'Fail',
    css: 'dot fail',
  }
};

  generateStatusClass(status: string) {
    if (status) {
      return STATUS_STYLING[status].css;
    } else {
      return;
    }
  }

app.html

<span *ngIf="col === 'status'" class="{{ generateStatusClass(element[col]) }}"></span>

---

在

generateStatusClass（status:string）

方法中，检查

status

是否真实，但检查字典中是否有状态值（例如

na

不存在）。将代码更改为类似这样的内容

 generateStatusClass(status: string) {
    if (status && STATUS_STYLING[status]) {
      return STATUS_STYLING[status].css;
    } else {
      return;
    }
  }

<span *ngIf="col === 'status'" [ngClass]="generateStatusClass(element[col])"></span>

另外，我不确定

class={{…}

是否有效。您可能希望将其更改为

ngClass

，如下所示

 generateStatusClass(status: string) {
    if (status && STATUS_STYLING[status]) {
      return STATUS_STYLING[status].css;
    } else {
      return;
    }
  }

<span *ngIf="col === 'status'" [ngClass]="generateStatusClass(element[col])"></span>

错误现已消失，但css类未在span类中应用。尽管我使用了

[ngClass]

@Johnny-您可能希望在方法中使用

console.log（status）

，以查看是否从元素[col]中获得了预期的值。是的，它返回了正确的值，但没有反映在类中检查元素时是否看到应用的类？如果您确定方法返回的字符串正确，css类可能超出范围。我已经修复了。谢谢@DaggeJ