Question

我无法使用* 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>

问题是我的truthy语句是渲染（带有View {{ daysBetween[i] | date:'EEEE' }}'s Plan的按钮），但我的虚假值（ng-template）不是。我看了几个教程，我认为我做得对，但我现在只研究Angular4几天了。请帮忙！

Answer 1

你可以使用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>

Answer 2

我认为您应该再次检查 * 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 中使用该标记。

* ngIf / else不工作Angular4

2 个答案: