Angularjs 2根据索引显示隐藏

时间:2017-04-25 11:57:56

标签: angular

我想根据索引显示隐藏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 字段。

我如何解决这个问题?

1 个答案:

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