在angular 9中为mat-table中的mat-row添加可编辑字段

我正在研究一个角度屏幕的需求，以允许用户在具有单列的表中维护数据。我下面的代码正在正确地显示数据，但到目前为止，我还没有找到任何可以使一列数据可编辑的示例。

<div class="SERIALCLASS">
<br/>
<div class="center" >
Serial Exceptions<br/>
<div>
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="partNo">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 300px !important;padding-right: 15px !important;">  Part No:  </th>
<td mat-cell *matCellDef="let row" style="padding-right: 15px !important;"> {{row.partNo}} </td>
</ng-container>
<ng-container matColumnDef="partNo1">
<th mat-header-cell *matHeaderCellDef style="width: 300px !important;padding-right: 15px !important;"> 
<mat-form-field class="filter" floatLabel="never" style="width: 80px !important;">
<mat-label>Filter</mat-label>
<input matInput [formControl]="partNoFilter">
</mat-form-field></th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns1">  </tr>
</table>
</div>
</div>
</div>

。TS文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { UserApiService } from 'src/app/services/api/user-apiservice';
@Component({
selector: 'app-serial-exceptions',
templateUrl: './serial-exceptions.component.html',
styleUrls: ['./serial-exceptions.component.scss']
})
export class SerialExceptionsComponent implements OnInit {
isLoading = true;
isempty = false;
dataSource = new MatTableDataSource<any>([]);
partNoFilter = new FormControl('');
@ViewChild(MatSort) sort: MatSort;    
@ViewChild(MatPaginator) paginator: MatPaginator;

displayedColumns: string[] = ['partNo']
displayedColumns1: string[] = ['partNo1']
filterValues = {
partNo: ''
}
constructor(
private repoService: UserApiService,
) { }
ngOnInit(): void {
this.getData();
this.partNoFilterFunc();
}
getData(){
this.isLoading = true
this.isempty = false;
setTimeout(() => {
this.repoService.getSerialExceptions().subscribe(largeDataSet => {
console.log(largeDataSet);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.dataSource.data = largeDataSet;
})
})
this.dataSource.filterPredicate = this.createFilter();
}
partNoFilterFunc(){
this.partNoFilter.valueChanges
.subscribe(
partNo => {
this.filterValues.partNo = partNo;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
}
createFilter(): (data: any, filter: string) => boolean {
let filterFunction = function(data, filter): boolean {
let searchTerms = JSON.parse(filter);
return data.partNo.toString().toLowerCase().indexOf(searchTerms.partNo.toLowerCase()) !== -1;
}
return filterFunction;
}
}

一个同事向我指出了这个例子，但是对于我正在尝试做的事情来说，它似乎过于复杂了。事实上，我放弃了我所做的工作来尝试这个例子，因为我得到了许多错误。