我想根据索引显示隐藏div
template
<tbody>
<tr *ngFor="#item of itemList; #i = index">
<td class="text-center">{{i+1}}</td>
<td class="text-center">{{item.name}}</td>
<td class="text-center">{{item.email}}</td>
<td class="text-center">{{item.city}}</td>
<td class="text-center"><span (click)="removeItem($index)" class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-plus" (click)="onSelect(i)"></span>
<td [hidden]="IsHidden">{{item.orderid}}</td>
</tr>
.ts
IsHidden= true;
onSelect(index){
console.log(this.itemList[index]);
this.IsHidden = !this.IsHidden;
}
当我点击第一个时,它会显示所有 tr hidden
字段。
我如何解决这个问题?
答案 0 :(得分:1)
因为您需要使用item.isHidden
而不是this.isHidden
<tbody>
<tr *ngFor="#item of itemList; #i = index">
<td class="text-center">{{i+1}}</td>
<td class="text-center">{{item.name}}</td>
<td class="text-center">{{item.email}}</td>
<td class="text-center">{{item.city}}</td>
<td class="text-center"><span (click)="removeItem($index)" class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-plus" (click)="onSelect(item)"></span>
<td [hidden]="item.isHidden">{{item.orderid}}</td>
</tr>
TS
onSelect(item){
console.log(this.itemList[index]);
item.IsHidden = !item.IsHidden;
}