Angular新手求助：Angular Material表格内嵌下拉框如何设置预选中值

嘿，我来帮你搞定这个默认选中的问题！你现在的核心问题是绑定的数据源不对，而且可能还存在对象引用匹配的问题，咱们一步步来解决：

1. 修正ngModel的绑定目标 #

你当前的[(ngModel)]="SelectedMailItem.PaymentMethod"绑定的是一个全局的SelectedMailItem变量，但表格里每一行对应一个element，每个行的下拉框应该绑定到当前行element的PaymentMethod属性，这样才能正确显示该行对应的默认值。

修改后的模板代码：

<ng-container matColumnDef="PaymentMethodName">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Payment Method</mat-header-cell>
  <mat-cell *matCellDef="let element">
    <mat-form-field floatLabel="never" appearance="outline" [style.width.px]=150>
      <mat-select 
        placeholder="Payment Type" 
        [(ngModel)]="element.PaymentMethod" 
        name="paymentType" 
        (change)="ClearAmount(element)"
        [compareWith]="comparePaymentMethods"> <!-- 后面会解释这个属性 -->
        <mat-option *ngFor="let paymentType of Picklist.PaymentMethods" [value]="paymentType">
          {{paymentType.Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </mat-cell>
</ng-container>

注意这里两个关键修改：

• 把[(ngModel)]="SelectedMailItem.PaymentMethod"改成了[(ngModel)]="element.PaymentMethod"
• 把(change)="ClearAmount(SelectedMailItem)"改成了(change)="ClearAmount(element)"，确保触发方法时传递的是当前行的元素

2. 处理对象引用不匹配的问题（如果PaymentMethod是对象类型） #

如果你的PaymentMethod是一个对象（而不是简单的字符串/数字），直接绑定可能会因为对象引用不同导致默认选中失效——比如element.PaymentMethod和Picklist.PaymentMethods里的对象虽然属性一样，但不是同一个内存引用。

这时候需要用mat-select的compareWith属性来告诉Angular如何判断两个对象是同一个选项：

在你的组件类中添加一个比较函数：

comparePaymentMethods(obj1: any, obj2: any): boolean {
  // 这里根据你实际的对象唯一标识来判断，比如Id或者Name
  return obj1 && obj2 ? obj1.Id === obj2.Id : obj1 === obj2;
}

然后在模板的mat-select上加上[compareWith]="comparePaymentMethods"，就像上面代码里的那样。

3. 验证数据结构匹配 #

最后要确保element.PaymentMethod的结构和Picklist.PaymentMethods里的每一项结构一致，比如如果element.PaymentMethod只存了Name，那你需要把[value]="paymentType"改成[value]="paymentType.Name"，同时把[(ngModel)]="element.PaymentMethod"绑定到element.PaymentMethodName（对应你之前展示的字段）。

举个例子，如果你的数据是字符串类型的支付方式名称：

<mat-select 
  placeholder="Payment Type" 
  [(ngModel)]="element.PaymentMethodName" 
  name="paymentType" 
  (change)="ClearAmount(element)">
  <mat-option *ngFor="let paymentType of Picklist.PaymentMethods" [value]="paymentType.Name">
    {{paymentType.Name}}
  </mat-option>
</mat-select>

这样调整后，表格里的每个下拉框就会默认选中当前行对应的支付方式啦！

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