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

Question

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

Это выглядит так

Я хочу отобразить значок редактирования только для 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><br><br>
<button mat-stroked-button class="b1" (click)="update()" formtarget="_blank">Update</button>

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

}

Я получаю данные в моем «источнике данных» в этом формате

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {key: "Vendor Id", value: "1", editable: false}
1: {key: "Vendor Name", value: "Free Charge", editable: false}
2: {key: "Category", value: "Beauty & Salon, Fitness, Food", editable: false}
3: {key: "Joining Date", value: "01-05-2019 11:30:25", editable: false}
4: {key: "Total No of Packages", value: "21", editable: false}
5: {key: "Total No of Outlets", value: "9", editable: false}
6: {key: "Total No of Services", value: "53", editable: false}
length: 7

Answer 1

Полагаю, теперь я понимаю ваш вопрос. Вы не можете написать такую ​​функцию?

showEditAction(key: string) { return key == 'Vendor Id' || key == 'Vendor Name' } 

и использовать ее с *ngIf для кнопки типа *ngIf="showEditAction(element.key)"