Question

我希望在单击span（Active）时隐藏跨度并显示下拉列表，然后选择特定值后隐藏下拉列表并再次在表格的单元格中显示每个跨度的跨度。如何实现呢？

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

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

1 个答案: