Блог

Главная - Вопросы по программированию - Angular: Как обрабатывать нулевое значение в таблице материалов angular

Angular: Как обрабатывать нулевое значение в таблице материалов angular

#angular #error-handling #undefined

#угловатый #обработка ошибок #неопределенный

Вопрос:

Я хотел применить css-класс на основе статуса. Например: если статус есть Pass , css-класс .dot .pass должен быть присвоен span в html. Как я могу обработать null значение, если api возвращает status: null . Я получаю это сообщение об ошибке ERROR TypeError: Cannot read property 'css' of undefined . Я полагал, что это было вызвано нулевым значением в статусе.

статус.постоянный.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>

Ответ №1:

В вашем generateStatusClass(status: string) методе вы проверяете, соответствует ли status он действительности, но нет, если в вашем словаре есть значение для статуса (например na , отсутствует). Измените код на что-то вроде этого;

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

Кроме того, я не уверен, что class={{...}} это работает. Возможно, вы захотите изменить это на ngClass , например;

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

Комментарии:

1. ошибка исчезла, но класс css не применяется в классе span. Несмотря на то, что я использовал [ngClass]

2. @Johnny — возможно, вы захотите console.log(status) в своем методе увидеть, что вы получаете ожидаемое значение от элемента [col] .

3. Да, он возвращает правильное значение, но не отражается в классе

4. Видите ли вы класс, применяемый при проверке элемента? Класс css может быть вне области видимости, если вы уверены, что правильная строка действительно возвращается из вашего метода.

5. Да, это так. Но когда вы проверяете элемент, он не отражается. Странно