如何在Angular v5中使用Angular Material选择列表实现双向绑定

嘿，我来帮你搞定Angular v5里用Angular Material选择框实现双向绑定的问题！先看看你给出的代码片段里的几个小问题，然后一步步给你修正并提供完整的实现方案。

第一步：修正模板里的明显错误 #

你原代码里的*ngFor="let currentHero of currentHeroes; let in = index-{{in}}"写法是不对的，索引变量的定义应该是let i = index，不需要插值表达式。另外，循环里的name属性必须唯一，否则表单控件会冲突，所以要结合索引来设置name值。

第二步：确保模块正确导入 #

在你的Angular模块（比如AppModule）里，必须导入Angular Material相关模块和表单模块，因为双向绑定[(ngModel)]依赖FormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须导入这个
import { MatFormFieldModule, MatSelectModule, MatOptionModule } from '@angular/material'; // Angular Material相关模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // 动画模块，Angular Material需要

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatOptionModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三步：组件类准备数据源 #

在你的组件类里，定义currentHeroes和products数组，作为表格和选择框的数据源：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 模拟的英雄数据，每个英雄有product属性用于双向绑定
  currentHeroes = [
    { id: 1, name: '英雄1', product: '' },
    { id: 2, name: '英雄2', product: '' }
  ];

  // 模拟的产品选项列表
  products = [
    { id: 'p1', name: '产品A' },
    { id: 'p2', name: '产品B' },
    { id: 'p3', name: '产品C' }
  ];

  // 可以添加一个方法来查看双向绑定是否生效
  logHeroes() {
    console.log('当前英雄的产品选择：', this.currentHeroes);
  }
}

第四步：完整的模板代码 #

修正后的HTML模板，实现表格循环+mat-select双向绑定：

<table>
  <tr *ngFor="let currentHero of currentHeroes; let i = index">
    <td>{{ currentHero.name }}</td>
    <td>
      <mat-form-field>
        <mat-select [(ngModel)]="currentHero.product" name="product-{{i}}" placeholder="选择产品">
          <mat-option *ngFor="let product of products" [value]="product">
            {{ product.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </td>
  </tr>
</table>

<!-- 测试按钮，点击查看绑定的数据 -->
<button (click)="logHeroes()">查看当前选择</button>

关键说明 #

• [(ngModel)]="currentHero.product"：这就是双向绑定的核心，选择框的选中值会自动同步到currentHero.product，反过来如果currentHero.product在代码里被修改，选择框也会自动更新选中状态。
• name="product-{{i}}"：因为是循环生成的选择框，每个控件的name必须唯一，避免表单控件命名冲突。
• [value]="product"：这里把整个product对象作为值绑定，如果只需要绑定id，可以改成[value]="product.id"，记得对应调整currentHero.product的类型。

这样设置后，当你在选择框中选择产品时，currentHeroes数组里对应的product属性会自动更新，点击测试按钮就能在控制台看到最新的选择结果啦！

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