如何更改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之外还有更多东西,但我相信逻辑应该是相同的。
我该怎么做?
谢谢你们。
答案 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
。我们无法在一个元素上使用ngIf
和ngFor
,因此如果您想使用ngIf
,则需要以不同的方式构建您的HTML。