Angular Почему ngIf всегда отрицает значение True

Ваш первый *ngIf работает, если wishitems является массивом.

Чтобы проверить, что происходит, замените willitems на такой массив чисел:

wishitems: Array<number> = [1];

И ваш HTML для:

<span *ngIf = "wishitems.length >=0" aria-hidden = "true">Test</span>

Затем вы начнете видеть Test в своем браузере.

Реструктурируйте свой *ngIf, чтобы он также обрабатывал часть отрицания. В настоящее время рассматривается сценарий правды. Кроме того, убедитесь, что правильное условие также используется для оценки в шаблоне.

См. код ниже:

<ng-template #elseTemplate>
  <span class = "far fa-heart float-right" aria-hidden = "true"></span>
</ng-template>

<span *ngIf = "wishitems.length > 0; else elseTemplate" class = "fas fa-heart float-right" aria-hidden = "true"></span>

Я понимаю ваше замешательство по поводу директивы *ngIf в Angular.

1. Проблема с длиной массива: Длина массива всегда является неотрицательным целым числом. Это может быть 0 (для пустого массива) или любое положительное целое число. Оно никогда не может быть отрицательным. Это означает, что wishitems.length >= 0 всегда будет верно для любого массива, даже пустого.

2. Правильное использование *ngIf и else: Синтаксис, который вы используете для условия else, неверен. В Angular вы используете ссылку на шаблон для части else.

Вот правильный способ реализовать то, чего вы пытаетесь достичь:

<ng-container *ngIf = "wishitems.length > 0; else emptyWishlist">
  <span class = "fas fa-heart float-right" aria-hidden = "true"></span>
</ng-container>
<ng-template #emptyWishlist>
  <span class = "far fa-heart float-right" aria-hidden = "true"></span>
</ng-template>

Этот код делает следующее:

• Если wishitems.length > 0 (это означает, что в списке желаний есть товары), отображается значок сплошного сердечка.
• Если wishitems.length равен 0 (что означает, что список желаний пуст), отображается контурный значок сердечка.

Если вы хотите изменить цвет фона вместо изменения значка, вы можете использовать [ngClass] или [style.background-color]:

<span class = "fa-heart float-right" 
      [ngClass] = "{'fas': wishitems.length > 0, 'far': wishitems.length === 0}"
      [style.background-color] = "wishitems.length > 0 ? 'pink' : 'white'"
      aria-hidden = "true"></span>

Этот подход использует один <span> и меняет его класс и цвет фона в зависимости от длины wishitems.

Помнить:

• Длина массива всегда неотрицательна, поэтому length >= 0 всегда истинно.
• Используйте length > 0, чтобы проверить, есть ли в массиве элементы.
• Используйте length === 0, чтобы проверить, пуст ли массив.

Хотите, чтобы я объяснил какую-либо часть этого решения более подробно?