Angular: 如何处理 angular material table 中的空值

Question

我想根据状态申请css class。例如：如果状态为Pass，css class .dot .pass 应分配给html 中的span。如果 api return status: null，我如何处理 null 值。我收到此错误消息 ERROR TypeError: Cannot read property 'css' of undefined。我相信这是由状态中的空值引起的。

status.constant.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',
  }
};

app.ts

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

app.html

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

Answer 1

在您的 generateStatusClass(status: string) 方法中，您正在检查 status 是否为真，但如果字典中有状态值则不会（例如 na 不存在） .将代码更改为类似这样的内容；

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

此外，我不确定 class={{...}} 是否有效。您可能想将其更改为 ngClass，像这样；

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

Angular: 如何处理 angular material table 中的空值

Angular: How to handle null value in angular material table

error-handling

undefined

angular