Как показать иконку редактирования только в нескольких строках таблицы матов

Question

Я размещаю иконку редактирования в виде столбца в моей таблице матов. Но это показывает для каждого ряда. Я не хочу, чтобы пользователь изменил все строки, я хочу только несколько строк, которые должны редактироваться. Это выглядит так

Я хочу отобразить значок редактирования только для 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;
  }

}

Answer 1

Вы можете добавить функцию в ngIf, как это, и используя ключи вашего источника данных, мы можем изменить его

html file

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

ts file

showEdit (ключ: строка) {ключ возврата == 'Имя поставщика'}