以角度 2 隐藏/显示 ngFor 中的单个项目

Question

我想隐藏一个跨度并在单击跨度（活动）时显示下拉列表，并在选择特定值后隐藏下拉列表并再次在表格的单元格中为每个跨度单独显示跨度。如何实现？

<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>

Answer 1

您使用了标志变量 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>