如何使用Angular 5在表中的特定行上显示按钮？

我是个新手。我想查看表中特定行的复选框更改事件中的“保存”和“取消”按钮。我该怎么设置呢。我正在使用以下代码：

<tr *ngFor="let configuration of configurationList;">
          <td>{{configuration.label}}</td>
          <td class="text-center">
            <mat-checkbox color='primary' name="{{configuration.id}}" [checked]="configuration.data" [(ngModel)]="configuration.data"
              (change)="onCheckedChange($event,configuration)"></mat-checkbox>
          </td>
          <td class="text-center">
            <div class="action-wrap" *ngIf="configuration.isEdit">
              <a  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>
            </div>                                 
          </td>
        </tr>

---

谢谢。

查看此示例了解如何使用ngClass指令

---

}

您可以使用ngclass用css隐藏元素（display:none；）

或者可以使用ngif删除元素

<a *ngIf="configuration.data" href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
<i class="fa fa-times"></i>

---

（如果configuration.data是布尔值）

在按钮上使用[隐藏]并设置表达式

              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>

---

再次使用相同的条件检查复选框。请注意我添加到

<div class="action-wrap">

将两个按钮组合在一起，除非每个按钮需要单独的逻辑

您可以从DOM中添加/删除元素：

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
        <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
                    (change)="onCheckedChange($event,configuration)">
        </mat-checkbox>
    </td>
    <td class="text-center">
        <div *ngIf="configuration.data" class="action-wrap">
            <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
            <i class="fa fa-check"></i>
            </a>
            <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
            <i class="fa fa-times"></i>
            </a>
        </div>                               
    </td>
</tr>

{{configuration.label}

或者用CSS类隐藏它

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
    <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
        (change)="onCheckedChange($event,configuration)"></mat-checkbox>
    </td>
    <td class="text-center">
    <div [class.hidden]="!configuration.data" class="action-wrap">
        <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
        <i class="fa fa-check"></i>
        </a>
        <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
        <i class="fa fa-times"></i>
        </a>
    </div>                               
    </td>
</tr>

.hidden { display: hidden; }

{{configuration.label}
.hidden{display:hidden；}

添加或删除带有

[class.]=“expression”

的类，该类根据条件显示或隐藏该元素。或者在按钮容器上使用

*ngIf=“expression”

。有任何示例吗？是的，我提供了一个，请单击注释末尾的链接。我尝试过ngIf指令，但它对表中的所有行都可见。我只想对该特定行可见。因此，您可以

这应该有效，在使用ngModel时尽量不要使用[checked]。您是否尝试过我的代码？使用模板中的{{configuration.data}}作为测试，以确保configuration.data是否正在更改。尝试删除*ngIf=“configuration.isEdit”它可能是ngIf，为了看看它是否有效，我会告诉你原因。检查这个example@Srusti那么，有什么效果吗？如果你已经实现了，你应该对答案进行评论，而不是最初的问题。这让我们很难了解发生了什么。

              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
                <i class="fa fa-check"></i>
              </a>
              <a [hidden]="configuration.data==false"  href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
                <i class="fa fa-times"></i>
              </a>

<div class="action-wrap">

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
        <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
                    (change)="onCheckedChange($event,configuration)">
        </mat-checkbox>
    </td>
    <td class="text-center">
        <div *ngIf="configuration.data" class="action-wrap">
            <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
            <i class="fa fa-check"></i>
            </a>
            <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
            <i class="fa fa-times"></i>
            </a>
        </div>                               
    </td>
</tr>

<tr *ngFor="let configuration of configurationList;">
    <td>{{configuration.label}}</td>
    <td class="text-center">
    <mat-checkbox color='primary'
                    name="{{configuration.id}}"
                    [checked]="configuration.data"
                    [(ngModel)]="configuration.data"
        (change)="onCheckedChange($event,configuration)"></mat-checkbox>
    </td>
    <td class="text-center">
    <div [class.hidden]="!configuration.data" class="action-wrap">
        <a href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
        <i class="fa fa-check"></i>
        </a>
        <a href="javascript:void(0);" class="icon-grid-delete p-10" matTooltip="Cancel!" (click)="cancel(configuration)">
        <i class="fa fa-times"></i>
        </a>
    </div>                               
    </td>
</tr>

.hidden { display: hidden; }