Angular表格*ngFor循环中自动补全组件绑定同步问题求助

一、解决当前数据绑定问题 #

核心问题是所有行共用同一个selected变量，导致选中状态全局同步。解决方法是给每行分配独立的绑定属性：

1. 组件层处理数据 #

如果你的codes数组是业务数据，直接给每个元素添加独立的选中属性：

// 组件.ts文件
codes = [/* 你的业务数据集合 */];
countrylist = [/* 国家列表数据 */];

ngOnInit() {
  // 初始化每行的选中属性
  this.codes.forEach(item => {
    item.selectedCountry = ''; // 初始值设为空或默认选项
  });
}

若不想修改原业务数组，可单独维护一个与codes索引对应的选中数组：

// 组件.ts文件
selectedCountries: string[] = [];

ngOnInit() {
  // 根据codes长度初始化数组
  this.selectedCountries = new Array(this.codes.length).fill('');
}

2. 模板层修正绑定 #

把原代码中[(ngModel)]="selected"替换为行内独立属性：

• 若修改原数组：[(ngModel)]="c.selectedCountry"
• 若用独立数组：[(ngModel)]="selectedCountries[i]"

同时修正原模板中的两处错误：

• datalist的option值应绑定cntrs.name（遍历countrylist的项），而非c.name
• 表格数据绑定需用当前行的c，而非未定义的product变量

修正后的完整模板代码：

<table
  class="table table-sm table-hover table-bordered table-light"
  style="width: 100%"
>
  <thead>
    <tr>
      <th>list</th>
      <th class="th">
        type
        <span style="cursor: pointer"> </span>
      </th>
      <th (click)="sort('tmprtr')">temperatureC</th>
      <th>temperatureF</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let c of codes; let i = index">
      <tr>
        <td>
          <div class="typeHead">
            <input
              type="text"
              [attr.list]="'countries' + i"
              [attr.name]="'country' + i"
              [(ngModel)]="c.selectedCountry"
            />
            <datalist [id]="'countries' + i">
              <option
                *ngFor="let cntrs of countrylist"
                [value]="cntrs.name"
                (click)="selectCountryName(cntrs.name, i)"
              >{{ cntrs.name }}</option>
            </datalist>
          </div>
        </td>
        <td>{{ c.temperatureC }}</td>
        <td>{{ c.temperatureF }}</td>
        <td>{{ c.summary }}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

二、表格内自动补全的通用实现思路 #

1. 独立数据绑定：每行的表单控件必须绑定到当前行数据的专属属性，或与行索引对应的独立数组，绝对不能使用全局单变量。
2. 动态唯一标识：利用*ngFor的index给datalist、input等控件生成唯一ID/name（如countries0、country0），避免不同行的控件冲突。
3. 数据同步处理：点击自动补全选项时，确保选中值同步到当前行的绑定属性，保持视图与数据的一致性。
4. 可选增强方案：如果需要更复杂的自动补全逻辑（如远程搜索、自定义样式），可替换原生datalist为Angular Material的mat-autocomplete组件，核心绑定逻辑保持一致——给每行分配独立的FormControl。

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