Javascript 根据单击角度2更改视图

如何更改Angular2模板中的视图：

<td *ngIf="hour === first">{{obj[0].from}}</td>
<td *ngIf="hour === second">{{obj[1].from}}</td>
<td *ngIf="hour === third">{{obj[2].from}}</td>

这个td是更大表的一部分，但你会得到逻辑

现在，我有另一部分模板如下：

<div class="info">
     <p>{{schedule[0].name}}</p>
     <p>{{schedule[1].name}}</p>
     <p>{{schedule[2].name}}</p>
</div>

我需要匹配第一个td上的单击，以便在.info类中只显示第一个p，其他p不可见，其他p也不可见：如果单击第二个td，则应显示第二个p，其他p不可见，以此类推

我试着遵循本教程：但无法让它工作。在我的实际模板中，除了p之外还有更多的东西，但我相信逻辑应该是相同的

我该怎么做

---

谢谢大家。

首先使用ngFor打印p，如下所示：

<div class="info">
     <p *ngFor="let s of schedule">{{s.name}}</p>
</div>

<div class="info">
     <p *ngFor="let s of schedule; let i = index" 
         [hidden]="hiddenIndex === i">{{s.name}}</p>
</div>

第三，在td上添加click方法，该方法调用设置hiddenIndex值的函数

---

就这样。我的解决方案使用hidden而不是ngIf。我们不能在一个元素上使用ngIf和ngFor，因此如果您想使用ngIf，您需要以稍微不同的方式构建html。

谢谢。请给我一分钟的时间：顺便说一下，如果一开始只需要一个p可见，那么需要在类0中为第一个p元素设置hiddenIndex:number=0。问题是我为什么要使用数组索引，因为在显示*ngFor all{{{schedule.name}的情况下..好的，那么您只需要打印一些计划，对吗？回到您以前的代码，然后以相同的方式使用我的解决方案：只需手动设置每个元素的[hidden]即可。您提供了帮助，我使用了！==而不是===它起作用了。谢谢：

<td *ngIf="hour === first" (click)="setHiddenIndex(0)">{{obj[0].from}}</td>
<td *ngIf="hour === second" (click)="setHiddenIndex(1)">{{obj[1].from}}</td>
<td *ngIf="hour === third" (click)="setHiddenIndex(2)">{{obj[2].from}}</td>

hiddenIndex: number;

setHiddenIndex(index: number) {
  this.hiddenIndex = index;
}