[英]Hide/show individual items inside ngFor in angular 2
我想在單擊跨度(活動)時隱藏一個跨度並顯示下拉列表,然后在選擇特定值后隱藏該下拉列表並針對每個跨度再次在表的單元格中顯示跨度。 如何實現呢?
<table class="table">
<tbody>
<tr *ngFor="let user of data | paginate: config; let i">
<td class="row">
<a [routerLink]="['/user-edit', user.Id]" style="text-transform: capitalize;">{{user.FirstName}} {{user.LastName}}</a><br />
{{user.Email}}<br />
<i class="fa fa-user"></i> Developer
</td>
<td style="width:15px;" *ngIf="user.IsActive==false"><br /><br /><b>Blocked</b></td>
<td *ngIf="user.IsActive==true">
<div class="inline-edit">
<span [hidden]="!isDisplay" (click)="beginEdit(editText,i)">
Active
</span>
<span>
<ng-select [items]="items"
(selected)="selected($event,i)">
</ng-select>
</span>
</div>
</td>
</tr>
</tbody>
</table>
您使用了標志變量isDisplay,每個循環都相同。 向用戶添加一些ID,以區分每個循環的標志。 我不確定beginEdit會做什么,也許您也需要更改它
<table class="table">
<tbody>
<tr *ngFor="let user of data | paginate: config; let i">
<td class="row">
<a [routerLink]="['/user-edit', user.Id]" style="text-transform: capitalize;">{{user.FirstName}} {{user.LastName}}</a><br />
{{user.Email}}<br />
<i class="fa fa-user"></i> Developer
</td>
<td style="width:15px;" *ngIf="user.IsActive==false"><br /><br /><b>Blocked</b></td>
<td *ngIf="user.IsActive==true">
<div class="inline-edit">
<span [hidden]="!isDisplay[user.id]" (click)="beginEdit(editText,i)">
Active
</span>
<span>
<ng-select [items]="items"
(selected)="selected($event,i)">
</ng-select>
</span>
</div>
</td>
</tr>
</tbody>
</table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.