时间戳

首页 > 解决方案 > 角度：如何处理角度材料表中的空值

angular - 角度：如何处理角度材料表中的空值

问题描述

我想根据状态申请 css 类。例如：如果状态为，则应在 html中分配Passcss 类。如果 api return ，我如何处理该值。我收到此错误消息。我相信这是由状态中的空值引起的。.dot .passspannullstatus: nullERROR 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',
  }
};

应用程序.ts

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

应用程序.html

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

标签： angularerror-handlingundefined

解决方案

在您的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>

推荐阅读