Question

我是棱角分明的新人。我想在表格中的特定行的复选框更改事件中显示保存和取消按钮。我该怎么设置呢。我使用以下代码：

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

当复选框更改时，两个标记都将可见，并且仅适用于那些行。否则都是隐藏的。如果我选择第一行复选框，然后选择第二行复选框，则按钮仅对第二行可见。

实际上，首次加载时，数据是否用于显示复选框。因此它将在已选中的复选框上显示按钮。

如果复选框已更改，则按钮将可见。

我的活动代码是：

onCheckedChange(event,configuration) {       
  configuration.isEdit=true;    
}

cancel(configuration) {
  this.configurationList.forEach(item => {
    item.isEdit = false;
  }
);

谢谢。

Answer 1

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

https://stackblitz.com/edit/angular-eh4acx?file=index.html

 <h4>NgClass</h4>
     <ul *ngFor="let person of people">
          <li [ngClass]="{
          'text-success':person.country === 'UK',
        'text-primary':person.country === 'USA',
        'text-danger':person.country === 'HK'
         }">{{ person.name }} ({{ person.country }})
     </li>

Component.ts

  class NgClassExampleComponent {

    people: any[] = [
   {
  "name": "Douglas  Pace",
  "age": 35,
  "country": 'UK'
},
{
  "name": "Mcleod  Mueller",
  "age": 32,
  "country": 'USA'
},
{
  "name": "Day  Meyers",
  "age": 21,
  "country": 'HK'
},
{
  "name": "Aguirre  Ellis",
  "age": 34,
  "country": 'UK'
},
{
  "name": "Cook  Tyson",
  "age": 32,
  "country": 'USA'
}
];

}

Answer 2

您可以使用ngclass隐藏css（display：none;）

元素

<a [ngClass]="{'hidden': configuration.data}" href="javascript:void(0);" class="icon-grid-edit p-10" matTooltip="Update!" (click)="update(configuration)">
<i class="fa fa-check"></i>

或者您可以使用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是布尔值）

Answer 3

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

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

Answer 4

重复使用相同的条件来检查您的复选框。注意我添加到

的内容

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

或者用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; }

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

4 个答案: