如何用Reactive Forms在Mat Table中展示服务数据并修复默认值问题？

一、表格不显示服务数据的常见原因及修复 #

• 数据未正确绑定到数据源
  Mat Table依赖MatTableDataSource作为核心数据源，必须确保服务返回的异步数据加载完成后再赋值给数据源：

  // 错误写法：直接赋值异步请求对象
  // this.dataSource.data = this.service.getData();
  
  // 正确写法：在订阅回调中处理数据
  this.service.getData().subscribe(res => {
    this.dataSource.data = res;
    // 若使用分页器，需同步绑定
    this.dataSource.paginator = this.paginator;
  });
  

• 列定义与数据字段不匹配
  HTML中matColumnDef的name属性必须与数据对象的字段名完全一致，否则表格无法匹配渲染：

  <!-- 错误示例：列名与字段名不一致 -->
  <ng-container matColumnDef="service_name">
    <td mat-cell *matCellDef="let element">{{element.serviceName}}</td>
  </ng-container>
  
  <!-- 正确写法：列名与字段名统一 -->
  <ng-container matColumnDef="serviceName">
    <td mat-cell *matCellDef="let element">{{element.serviceName}}</td>
  </ng-container>
  

• 未初始化数据源
  组件类中需提前初始化MatTableDataSource为非空值，避免初始状态下数据源未定义：

  dataSource = new MatTableDataSource<any>([]); // 初始化为空数组
  

二、Mat Select不显示默认值的常见原因及修复 #

• 值类型不匹配
  数据库返回的默认值与下拉选项的value类型必须一致（比如数字和字符串不能混用），否则无法匹配：

  // 示例：服务返回默认值为数字类型，选项value同步使用数字
  statusOptions = [
    { value: 0, viewValue: '禁用' },
    { value: 1, viewValue: '启用' }
  ];
  

• 表单绑定错误
  模板驱动表单需用[(ngModel)]绑定到数据对象字段；响应式表单需在表单组中正确初始化控件值：

  <!-- 模板驱动表单示例 -->
  <mat-select [(ngModel)]="element.status" placeholder="状态">
    <mat-option *ngFor="let opt of statusOptions" [value]="opt.value">
      {{opt.viewValue}}
    </mat-option>
  </mat-select>
  
  <!-- 响应式表单示例 -->
  <mat-select formControlName="status">
    <mat-option *ngFor="let opt of statusOptions" [value]="opt.value">
      {{opt.viewValue}}
    </mat-option>
  </mat-select>
  

  响应式表单初始化时需同步赋值：

  this.service.getData().subscribe(res => {
    this.dataSource.data = res;
    // 为每行数据初始化表单组
    res.forEach(item => {
      this.formArray.push(this.fb.group({
        status: [item.status]
      }));
    });
  });
  

• 对象类型选项的匹配问题
  若选项为对象类型，需通过[compareWith]函数指定匹配规则（默认是引用比较）：

  <mat-select [(ngModel)]="element.category" [compareWith]="compareCategory">
    <mat-option *ngFor="let cat of categoryOptions" [value]="cat">
      {{cat.name}}
    </mat-option>
  </mat-select>
  

  组件类中定义比较函数：

  compareCategory(obj1: any, obj2: any): boolean {
    return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
  }
  

三、完整实现示例 #

Component.ts #

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MyService } from './my.service';
import { FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-service-table',
  templateUrl: './service-table.component.html',
  styleUrls: ['./service-table.component.css']
})
export class ServiceTableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'status', 'operation'];
  dataSource = new MatTableDataSource<any>([]);
  statusOptions = [
    { value: 0, viewValue: '禁用' },
    { value: 1, viewValue: '启用' }
  ];
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  formArray!: FormArray;

  constructor(private myService: MyService, private fb: FormBuilder) {}

  ngOnInit(): void {
    this.loadData();
  }

  loadData(): void {
    this.myService.getServiceData().subscribe(res => {
      this.dataSource.data = res;
      this.dataSource.paginator = this.paginator;
      // 初始化响应式表单数组
      this.formArray = this.fb.array(
        res.map(item => this.fb.group({
          id: [item.id, { disabled: true }],
          name: [item.name],
          status: [item.status]
        }))
      );
    });
  }

  saveChanges(): void {
    this.myService.updateServiceData(this.formArray.getRawValue()).subscribe();
  }
}

HTML #

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" [formArrayName]="formArray">
    <!-- ID列 -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i">
        <input matInput formControlName="id">
      </td>
    </ng-container>

    <!-- 名称列 -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>服务名称</th>
      <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i">
        <input matInput formControlName="name">
      </td>
    </ng-container>

    <!-- 状态列 -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>状态</th>
      <td mat-cell *matCellDef="let element; let i = index" [formGroupName]="i">
        <mat-select formControlName="status">
          <mat-option *ngFor="let opt of statusOptions" [value]="opt.value">
            {{opt.viewValue}}
          </mat-option>
        </mat-select>
      </td>
    </ng-container>

    <!-- 操作列 -->
    <ng-container matColumnDef="operation">
      <th mat-header-cell *matHeaderCellDef>操作</th>
      <td mat-cell *matCellDef="let element">
        <button mat-raised-button color="primary" (click)="saveChanges()">保存修改</button>
      </td>
    </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

内容的提问来源于stack exchange，提问作者Root93