在角度 9

Question

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

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 文件

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

}

一位同事向我指出了这个例子，但对于我想要做的事情，它似乎过于复杂。事实上，由于我遇到了许多错误，我放弃了我为尝试这个例子所做的工作。

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

是否有一种简单的方法可以在 mat-row 中编辑列>

Answer 1

最简单的方法是使用 contenteditable HTML 属性

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