Как отфильтровать интерполированные результаты в Angular CLI

Question

Я использую ngFor для итерации и рендеринга результатов в моем HTML-интерфейсе

Одним из моих результатов является сообщение об ошибке, которое я просто отображаю как:

{{result.Error}}

ОднакоТеперь модель изменилась, и в некоторых сценариях сообщение об ошибке теперь может содержать объект JSON, поэтому на странице отображается полный объект для ошибок, содержащих значение JSON.

Как отфильтровать этот результат, проверив, проверяет ли егоJSON, и если он возвращает только значение errorMessage , а если нет, просто возвращает полное сообщение

Спасибо

Answer 1

Воспользуйтесь преимуществами JS и способа тестирования строк:

let error = 'some error from string';

function showError() {
  console.log(error && error.json && error.json.message || error.json || error || 'no error');
}

showError();
error = { json: 'some error from json' };
showError();
error = { json: { message: 'some error from json.message' } };
showError();

И вы можете идти так глубоко, как хотите.В угловом выражении это дало бы

{{ error && error.json && error.json.message || error.json || error || 'no error' }}

Answer 2

Вы можете добавить условие встроенного шаблона или использовать метод в своем компоненте для добавления дополнительной логики.

Для условия встроенного шаблона:

В вашем HTML:

{{ result.Error.errorMessage ? result.Error.errorMessage : result.Error }}

Как метод (для более сложной логики):

В вашем HTML:

{{ checkError(result.Error) }}

ВВаш файл TS:

checkError(error: any) {
    return result.Error.errorMessage ? result.Error.errorMessage : result.Error;
}