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

Я надеюсь, что кто-нибудь сможет мне это объяснить. Почему %ngIf, как и все остальное, всегда дает отрицательный результат, если только я не делаю что-то совершенно неправильно.

Это сценарий: У меня есть значок, если длина массива> = 0, цвет фона станет розовым. в противном случае цвет фона значка будет белым.

Независимо от того, как я меняю сценарий, он все равно становится истинным. Я удалил массив и значок по-прежнему оставался сплошным розовым. Я добавил else, он выберет другое, даже если *ngIf истинно. Итак, не уверен, что здесь происходит.

Вот некоторые из вещей, которые я пробовал

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


        <span *ngIf = "wishitems.length >=0" class = "fas fa-heart float-right" aria- 
        hidden = "true" ngIfElse = "wishitems.length == -1" class = "far fa-heart float-left" 
         aria-hide = "true"></span>

         <span *ngIf = "wishitems.length >=0" class = "fas fa-heart float-right" aria- 
         hidden = "true"></span>
    
          <span *ngIf = "wishItems.length <0" class = "far fa-heart float-right" aria- 
          hide = "true"></span>

Я помню, как где-то читал, что *ngIf не любит отрицательные числа. Любая помощь в было бы здорово указать мне правильное направление! Заранее спасибо.

🤔 А знаете ли вы, что...
JavaScript можно использовать для создания ботов и автоматизации задач в браузерах с помощью Puppeteer.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Angular69283 вопроса

Ответы:

Ваш первый *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.

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

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

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

Ответы:

Интересные вопросы для изучения