*ngIf/else не работает Angular4

У меня возникли проблемы с использованием операторов *ngIf/else. Вот настройка:

<div *ngFor="let sub of day">
   <p>{{ sub.subject }}</p>
   <button type="button" *ngIf="sub.subject; else showElse" routerLink="/day" (click)="viewIndividual(day)" class="btn btn-{{colors[i]}}">View {{ daysBetween[i] | date:'EEEE' }}'s Plan</button>
   <ng-template #showElse>
      <a type="button" class="btn btn-primary">Add a Lesson</a>
   </ng-template>
</div>

Проблема в том, что мое истинное утверждение отображается (кнопка с View {{ daysBetween[i] | date:'EEEE' }}'s Plan) на нем, а мое ложное значение (ng-template) — нет. Я просмотрел пару руководств и подумал, что делаю все правильно, но я изучаю Angular4 всего несколько дней. Пожалуйста помоги!


angular ng-template angular-ng-if
person lnamba    schedule 08.06.2017    source источник
comment
У меня хорошо работает plnkr.co/edit/2yaERj7RUJBGipOJrxSE?p=preview   -  person yurzui    schedule 08.06.2017
comment
Хм, да... спасибо! Мне кажется, я тут что-то напутал. Я хочу, чтобы кнопка «Добавить урок» или «Просмотр плана» показывали...   -  person lnamba    schedule 08.06.2017
comment
Что такое sub.subject? Поскольку вы спрашиваете свой оператор if, есть ли значение в sub.subject, поэтому, если ваш субъект не будет изменен, чтобы стать равным 0, null или false, он всегда будет истинным. Это то, чего вы пытаетесь достичь? plnkr.co/edit/3h3UofVnVa7jKvbR1rdw?p=preview   -  person snaplemouton    schedule 08.06.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете либо использовать ngSwitch, либо, поскольку у вас есть только два случая, перейти сразу к двум ngIf:

<div *ngFor="let sub of day">
   <p>{{ sub.subject }}</p>
   <button *ngIf="sub.subject" type="button" routerLink="/day" (click)="viewIndividual(day)" class="btn btn-{{colors[i]}}">View {{ daysBetween[i] | date:'EEEE' }}'s Plan</button>
   <a *ngIf="!sub.subject" type="button" class="btn btn-primary">Add a Lesson</a>
</div>
person tilo    schedule 04.12.2017

arrow_upward
0
arrow_downward

Я думаю, вам следует еще раз проверить условие *ngIf. Я пробовал то же самое в своем коде, он работает.

TestObj = [
            {
                category : 'Test'
            }, {
                category : 'Test1'
            }
        ]

HTML-код:

<div *ngFor="let key of TestObj">
    <p *ngIf="key.subcategory; else newText">** {{key.category}}</p>
       <ng-template #newText>No category found</ng-template>
</div>

Это показывает No category found два раза из-за условия.

Примечание: Если вы хотите упростить условие, вы можете сделать это, проверив условие темы в компоненте и установив флаг true или false в соответствии с этим. И используйте этот флаг в *ngIf.

person Saurabh Lende    schedule 04.01.2018