Блог

Главная - Вопросы по программированию - Условное отображение раздела на основе элементов массива в угловой

Условное отображение раздела на основе элементов массива в угловой

#angular

Вопрос:

У меня есть приведенный ниже код, который должен отображать раздел, только если статус «Ожидает» во всех выбранных элементах.

 <ng-container *ngIf="selectedAlerts.length amp;amp; selectedStatus[0] === 'PENDING'">
          <span class="md-margin__right--xs md-padding__left--l inline-block text-divider">
            {{ selectedAlerts.length }} Job(s) Selected
          </span>
  <button md-button [size]="28"
          aria-label="Cancel" class="md-margin__horizontal--s" color="red" (click)="cancel()">
    Cancel
  </button>

</ng-container>

В настоящее время я могу проверить только первый элемент в массиве:

 *ngIf="selectedAlerts.length amp;amp; selectedStatus[0] === 'PENDING'"

Как мне проверить его для всех selectedStatus элементов массива?

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

1. Напишите функцию в файле ts, в которой вы повторяете все элементы и устанавливаете флаг true, когда все находятся в ожидании. Пусть ngIf основан на этой переменной флага.

2. Вы можете добавить функцию в свой *ngIf *ngIf="checkSelectedItemsStatus()" , и в этой функции вы можете возвращать статус на основе выбранных элементов.

Ответ №1:

Я бы предложил вам сделать свою логику в ts файле (метод, который будет вызван в шаблоне)

и чтобы ответить на ваш вопрос, вы можете проверить все элементы в массиве, используя один из встроенных методов массива:

например:

проверьте, все ли товары находятся на рассмотрении:

 selectedStatus.every(item => item === 'PENDING')

проверьте, находится ли на рассмотрении хотя бы один пункт:

 selectedStatus.some(item => item === 'PENDING')

для получения дополнительной информации ознакомьтесь с этими документами:

Ответ №2:

Вы можете использовать метод Array includes (), чтобы проверить, содержит ли какой-либо из элементов вашего массива строку «ОЖИДАНИЕ», как это:

 <ng-container *ngIf="selectedAlerts.length amp;amp; selectedStatus.includes('PENDING')">
Метки: