如何仅在垫表的几行上显示编辑图标答案

【问题标题】：How to show edit icon on few rows only of mat table如何仅在垫表的几行上显示编辑图标
【发布时间】：2020-04-14 15:57:52
【问题描述】：

我将编辑图标作为列放在我的垫子表中。但它显示每一行。我不希望用户更改所有行，我只想要几行应该可编辑的。它显示像这样

我只想显示第 2 行和第 3 行的编辑图标。但它显示每一行。我试过 *ngIf 但无法编写它的 TS 代码。

下面我附上了我尝试过的代码

details.component.html

<div class="reviews-style">
    <div>


        <table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
            <ng-container matColumnDef="key">
            <td mat-cell *matCellDef="let element" class="item-name"> {{element.key}} </td>
            </ng-container>

            <ng-container matColumnDef="value" >
                <th mat-header-cell *matHeaderCellDef> No. </th>
                <td mat-cell *matCellDef="let element" > 
                  <span *ngIf="!element.editable; else editPlace">
                  {{element.value}} 
                  </span>
                  <ng-template #editPlace>
                    <input [(ngModel)]="element.value" (keyup.enter)="element.editable = false">
                  </ng-template>
                </td>
              </ng-container>

              <ng-container matColumnDef="actions">
                <mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
                <mat-cell *matCellDef="let element">
                  <button mat-icon-button matTooltip="Click to Edit" (click)="edit(element)" class="iconbutton" color="primary">
                      <mat-icon aria-label="Edit">edit</mat-icon>
                    </button>
                </mat-cell>
              </ng-container>


            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </div>



</div>

details.component.ts

  interface Data {
  key: string;
  value: string;
  editable: boolean;
}

const namesEnum: {[key:string]: string} = {
  'vid' : 'Vendor Id',
  'bn' : 'Vendor Name',
  'cate' : 'Category',
  'jdate' : 'Joining Date',
  'pcount' : 'Total No of Packages',
  'ocount' : 'Total No of Outlets',
  'scount' : 'Total No of Services',
}


@Component({
  selector: 'app-vendordetails',
  templateUrl: './vendordetails.component.html',
  styleUrls: ['./vendordetails.component.css']
})
export class VendordetailsComponent implements OnInit {

  constructor(private activatedRoute:ActivatedRoute,private apiService:ApiService) { }

  dataSource: Data[] = [];
  displayedColumns: string[] = ['key', 'value','actions'];
  vid:any;
  result:any;
  result1:any;
  col:any;

  ngOnInit() 
  {
    this.vid=this.activatedRoute.snapshot.paramMap.get('vid');

    this.activatedRoute.queryParamMap.subscribe((queryParams:Params)=>{
      let vid=this.vid;

     this.col='vdetail'
      this.apiService.getVendorDetailsById(vid,this.col)
      .subscribe(data=>{
        this.result = data[0];

        const newdata: Data[] = [];
        for (const prop in this.result) {
        newdata.push({
        key: namesEnum[prop],
        value: this.result[prop],
        editable: false
        })        
        }     
      this.dataSource = newdata;
      });
    });
  }

  edit(e: any) {
    e.editable = !e.editable;
  }

}

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以像这样在 ngIf 中添加功能，并使用您的数据源的键我们可以更改它

html文件

<button mat-icon-button *ngIf="showEditAction(element.key)" matTooltip="Click to Edit" (click)="edit(element)" class="iconbutton" color="primary">

ts 文件

showEdit(key: string) { return key == '供应商名称' }

【讨论】：