html - 有什么方法可以使用 Angular Material 中的 mat-table 来编辑表格的特定列

Question

在我的元素中，我使用 Angular Material 的表格以表格格式显示值，根据新要求，我必须对最后 2 列执行在线编辑，如果用户单击第 1 列，则其他列自动突出显示，一切都必须使用 Angular Material 完成

This is the last 2 column i want to perform in-line editing

>  <ng-container matColumnDef="weight">
>       <th mat-header-cell *matHeaderCellDef> Weight </th>
>       <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
>     </ng-container>
>     <ng-container matColumnDef="symbol">
>       <th mat-header-cell *matHeaderCellDef> Symbol </th>
>       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
>     </ng-container>
>   
>     
>     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
>     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>   </table>

---

How i achieved is as follows :

<tbody>
                <tr *ngFor="let data of dataSource">      
                   <td >{{data.position}}</td>
                   <td >{{data.name}}</td>
                   <td *ngIf="data.position === editRowId"> <input matInput [(ngModel)]="data.weight"></td>
                   <td *ngIf="data.position !== editRowId" (click)="editTableRow(data.position)">{{data.weight}}</td>
                   <td *ngIf="data.position === editRowId"> <input matInput [(ngModel)]="data.symbol"></td>
                   <td *ngIf="data.position !== editRowId" (click)="editTableRow(data.position)">{{data.symbol}}</td>
                </tr>
            </tbody>

---

TS file for above code :

export class AppComponent {
  showEditTable = false;
  editRowId: any = '';
  selectedRow;
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
  editTableRow(val) {
  console.log('click event started val = ' + val);
  this.editRowId = val;
  console.log('click event ended with val = ' + val);
  }
}

我希望结果是表格，其中最后 2 列可以内联编辑，同时我可以将修改后的数据发送到后端

Answer 1

Naman，一样的，你要用<ng-container>避免创建额外的标签，因此您的列变得像

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> 
      <ng-container *ngIf="element.position!==editRowId">
      <span (click)="edit(element.position,'weigth')">{{element.weight}} </span>
      </ng-container>
      <ng-container *ngIf="element.position===editRowId">
      <input matInput name="weigth" [(ngModel)]="element.weight"> 
      </ng-container>
      </td>
  </ng-container>

好吧，我调用函数“edit”传递两个参数，位置和字符串表示输入属性的“名称”。这允许我们“聚焦”点击的输入。怎么办？

我们声明了 MatInputs 的 ViewChildren

  @ViewChildren(MatInput,{read:ElementRef}) inputs:QueryList<ElementRef>;

注意我们得到的不是 MatInput，而是“ElementRef”。这允许我们在 out 函数编辑中获取属性名称等于作为参数传递的字符串的元素，并将其聚焦。看到我们需要将所有内容“封闭”在 setTimeout 中以允许 Angular 显示输入

  edit(row,element)
  {
    this.editRowId=row;
    setTimeout(()=>{
      this.inputs.find(x=>x.nativeElement.getAttribute('name')==element)
          .nativeElement.focus()
    })
  }

您可以在 stackblitz 中查看完整示例

好吧，在示例中，数据是硬编码的。让我们假设数据(和结构)来自服务数据。数据很容易想象，因为它是相同的。我们可以将“结构”想象成一个对象数组，它具有三个属性:name、head ad fixed。如果 fixed 为真，我们只显示数据，否则我们可以编辑。所以我们唯一需要做的就是在 *ngFor

中创建列

首先，我们将了解如何定义我们的架构。这只是一个数组

[
   {name:'position',head:"No.",fixed:true},
   {name:'name',head:"Name",fixed:true},
   {name:'weight',head:"Weigth",fixed:false},
   {name:'symbol',head:"Symbol",fixed:false},

]

我们的 table 变成了这样

<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of schema;let last=last">
        <ng-container [matColumnDef]="column.name">
            <th mat-header-cell *matHeaderCellDef> {{column.head}} </th>
            <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element[schema[0].name]!==editRowId || column.fixed">
                    <span 
                      (click)="column.fixed?editRowId=-1:
                               edit(element[schema[0].name],column.name)">
                         {{element[column.name]}} 
                    </span>
      </ng-container>
      <ng-container *ngIf="element[schema[0].name]===editRowId && !column.fixed">
         <input matInput [id]="column.name"
              [(ngModel)]="element[column.name]"
              (blur)="last?editRowId=-1:null"> 
      </ng-container>
      </td>
    </ng-container>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

看到我们用 element[column[0].name] “替换”了 element.position -我认为模式的第一个元素将是“键”以及我们如何使用 [(ngModel)]="elemen[列.名称]”。是的，为了引用 element.position，我们也可以引用 elemen["position"] 并记住我们正在迭代“schema”

另一件事是我们将使用“id”，而不是“name”。这是因为如果我们使用名称，实际上 Angular 将其作为属性，例如:ng-reflect-name，这不允许我们关注输入。

最后我们在 ngOnInit 中获取了数据。我们将使用 forkJoin 将模式和数据放在一起。 forkJoin 仅调用和可观察对象数组(在本例中为 this.dataService.getSchema() 和 this.dataServide.getData，并在数组中返回所有可观察对象的响应。我们使用这种方式([variable1,variable2]) 将第一个结果存储在“variable1”中，将第二个结果存储在 variable2 中

ngOnInit()
{
  forkJoin([this.dataService.getSchema(),this.dataService.getData()])
    .subscribe(([schema,data])=>{
      this.dataSource=data;
      this.displayedColumns=schema.map(x=>x.name)
      this.schema=schema
    })
}

displayedColumns 必须是一个包含列名称的数组，但我们也需要将“模式”存储在一个数组中。

在stackblitz我创建一个服务并使用 rxjs 创建运算符“模拟”可观察对象 of ，在实际应用程序中，数据来自 httpClient.get(....)