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

Question

我是 Angular 的新手。我在 mat 表上添加了一列用于编辑字段。但它显示在每一列。我只想让几行可编辑。我怎样才能实现它？

看起来像这样

我只想显示第 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)"