Блог

Главная - Вопросы по программированию - Обработка неопределенного состояния в угловом классе ngClass

Обработка неопределенного состояния в угловом классе ngClass

#angular #typescript

Вопрос:

Я пытаюсь назначить класс на основе двух объектов.

 lt;div class="col" [ngClass]="{'d-none':item.FinancialDetails?.length===0 || item.FinancialDetails===undefined || itemFinancials===false }"gt;  lt;app-financials [financials]="item.FinancialDetails"gt;lt;/app-financialsgt; lt;/divgt;

Здесь, как вы можете видеть, для одного и того же объекта FinancialDetails я сейчас проверяю два условия, потому что длина сама по себе работает не так, как ожидалось.

Но есть ли какой-либо способ объединить эти первые два условия вместе? Я имею в виду длину и неопределенное условие.

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

1. Может быть, вы имеете в виду это? [ngClass]="{'d-none': !(item.FinancialDetails amp;amp; item.FinancialDetails.length gt; 0) || itemFinancials===false }"

2. Извините, но опять же есть два условия для одного и того же объекта FinancialDetails, не так ли? Я подумал, есть ли какой-либо способ сделать это одним условием. Например, проверка неопределенности и отсутствия значения в массиве.

3. Или даже кратчайший путь, такой как этот: [ngClass]="{'d-none': !(item.FinancialDetails?.length gt; 0) || itemFinancials===false }" . С ?. помощью этого предотвращается сбой при доступе length из-за item.FinancialDetails was null или undefined . Отмените его, чтобы проверить , возвращается ли пустой массив null или undefined true .

4. Объект, возможно, «неопределен» при попытке таким образом

Ответ №1:

Используйте силу Безопасного оператора ( ? ). Попробуйте код ниже:

 lt;div class="col" [ngClass]="{'d-none': item?.FinancialDetails?.length === 0 || itemFinancials===false }"gt;  lt;app-financials [financials]="item.FinancialDetails"gt;lt;/app-financialsgt; lt;/divgt;

Только изменение, имеющее одно условие — item?.FinancialDetails?.length === 0

Метки: