Angular2 *ngIf не работает правильно

В моем коде я использую *ngIf, который должен показывать только один из двух в любое время. Но проблема в том, что он показывает только второй, хотя второй не должен показываться в некоторых точках. Я использую цикл for, чтобы показать все элементы, но, как вы можете видеть на картинке, отображается только второй, хотя второй имеет значение -1. Спасибо за помощь!

Код:

<ng-template let-internship="rowData" pTemplate="body" *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) === -1;"><!--TODO BRIAN ngif-->
  <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, false]"><!--Not shown TODO-->
    <i class="glyphicon"></i>Meer
  </a>
</ng-template>
<ng-template let-internship="rowData" pTemplate="body" *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) !== -1;"><!--TODO BRIAN ngif-->
  <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, true]"><!--always shown-->
    <i class="glyphicon"></i>Meer{{favorite?.FavoritesIds.indexOf(internship?.InternshipId)}}
  </a>
</ng-template>

Образ: Изображение, которое показывает состояние

Источник

3 ответа

Решение

Использование div вместо нг-шаблона. Вы не можете использовать синтаксический сахар * с ng-шаблоном.

Структурные директивы

Звездочка - это "синтаксический сахар" для чего-то более сложного. Внутренне, Angular desugars это в два этапа. Во-первых, он переводит * ngIf= "..." в атрибут шаблона, template="ngIf ...", вот так.

<div template="ngIf hero">{{hero.name}}</div>

Затем он переводит атрибут шаблона в элемент, обернутый вокруг элемента host, вот так.

<ng-template [ngIf]="hero">
  <div>{{hero.name}}</div>
</ng-template>
Источник

ОБНОВИТЬ

Как сказал @Daniel Cooke, мне следовало использовать div, потому что шаблоны ng не работают так хорошо, когда рядом друг с другом. Скорее используйте div, и только один шаблон ng сделал это. Итак, рабочий код:

<ng-template let-internship="rowData" pTemplate="body" ><!--TODO BRIAN ngif -->
          <div *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) === -1">
            <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, false]"><!--niet bestaat TODO-->
              <i class="glyphicon"></i>Meer
            </a>
          </div>
          <div *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) != -1;">
            <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, true]"><!--wel bestaat-->
              <i class="glyphicon"></i>Meer{{favorite?.FavoritesIds.indexOf(internship?.InternshipId)}}
            </a>
          </div>
        </ng-template>
Источник

Сделать {{любимый?.FovingIds.indexOf(интернатура?.InternshipId) | json}} чтобы увидеть что в переменной

Мой совет - поместить оператор if в отдельную функцию.

Возможно, что === проверяет строку, а ее число.

Источник
Другие вопросы по тегам