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

Question

I am working on a requirement for an angular screen to allow users to maintain data in a table that has a single column. The code I have below is working to display the data correctly, but so far I have not been able to find any examples where I can make the one column of data editable.

HTML

<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 file

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

}

A co-worker pointed me to this example, but for what I am trying to do it seems overly complicated. In fact I backed out the work I did to try this example because of the numerous errors I was getting.

https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Finline-edit%2Finline-edit.component.ts

Is there an easy way to make a column editable within a mat-row>

Answer 1

Easiest way is to use contenteditable HTML attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable