根据Angular2中的点击更改视图

Question

如何更改 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，而其他人将不可见，其他人也是如此：如果第二个td 是点击后，应该显示第二个p，其他的不显示，等等。

我已尝试遵循本教程：http://jilles.me/ng-click-and-ng-if-in-angular2/，但无法使其正常工作。在我的实际模板中，除了p之外还有更多的东西，但我相信逻辑应该是一样的。

我该怎么做？

谢谢大家。

Answer 1

首先使用ngFor打印p如下：

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

第二次使用索引，将hidden标签添加到p，如下：

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

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

<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;
}

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