根据Angular2中的单击更改视图

时间:2017-04-13 13:33:00

标签: javascript jquery html angular typescript

如何更改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上的点击,这样才会在p课程中显示第一个.info,其他人将不会显示,其他人也是如此:如果点击第二个td,则应显示第二个p,其他不显示,等等。

我尝试过这个教程:http://jilles.me/ng-click-and-ng-if-in-angular2/但是无法让它工作。在我的实际模板中除了p之外还有更多东西,但我相信逻辑应该是相同的。

我该怎么做?

谢谢你们。

1 个答案:

答案 0 :(得分: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。我们无法在一个元素上使用ngIfngFor,因此如果您想使用ngIf,则需要以不同的方式构建您的HTML。