Angular 4中ID与名称绑定问题：点击选中未关联对应ID

看起来你是只把输入框和name字段做了单独绑定，没关联到对应的id——其实核心是要跟踪整个选中的对象，而不是单独的名称字段。下面给你两种常见的实现方式，都能完美解决这个问题：

方式一：基础输入框+自定义下拉列表 #

组件类代码 #

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

@Component({
  selector: 'app-name-id-select',
  templateUrl: './name-id-select.component.html'
})
export class NameIdSelectComponent {
  // 你的源数据数组
  itemList = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
    // 更多数据可自行补充
  ];

  // 用于存储选中的完整对象（包含id和name）
  selectedItem: { id: number, name: string } | null = null;
  // 搜索关键词绑定字段
  searchKeyword = '';

  // 实时过滤符合搜索条件的项
  get filteredItems() {
    return this.itemList.filter(item => 
      item.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
    );
  }

  // 点击选中项时触发的方法
  selectItem(item: { id: number, name: string }) {
    this.selectedItem = item;
    // 这里可以直接拿到选中的id，做后续业务逻辑处理
    console.log('当前选中的ID:', item.id);
  }
}

模板代码 #

<!-- 搜索输入框：显示选中项的name，同时绑定搜索关键词 -->
<input 
  type="text" 
  [(ngModel)]="searchKeyword" 
  placeholder="搜索名称..."
  [value]="selectedItem?.name"
>

<!-- 过滤后的结果列表 -->
<ul *ngIf="filteredItems.length > 0" class="search-results">
  <li *ngFor="let item of filteredItems" (click)="selectItem(item)">
    {{ item.name }}
  </li>
</ul>

<!-- 可选：显示当前选中的ID，方便调试或展示给用户 -->
<div *ngIf="selectedItem">
  当前选中ID：<strong>{{ selectedItem.id }}</strong>
</div>

方式二：使用Angular Select控件（更规范） #

如果你的项目用到了Angular Material，或者更倾向于原生表单控件的交互体验，直接绑定整个对象作为选项值会更省心：

组件类（和方式一基本一致，无需额外修改） #

模板代码（以Angular Material为例） #

<mat-form-field appearance="fill">
  <mat-label>选择用户</mat-label>
  <!-- 搜索输入框 -->
  <input matInput [(ngModel)]="searchKeyword" placeholder="输入名称搜索...">
  <!-- 下拉选择框：绑定整个选中对象 -->
  <mat-select [(value)]="selectedItem">
    <mat-option *ngFor="let item of filteredItems" [value]="item">
      {{ item.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- 展示选中的ID -->
<p *ngIf="selectedItem">选中用户ID：{{ selectedItem.id }}</p>

关键注意点 #

1. 确保你已经在模块中导入了FormsModule（因为用到了[(ngModel)]双向绑定）：

import { FormsModule } from '@angular/forms';
// 如果用Material，还要额外导入MatSelectModule、MatInputModule等

@NgModule({
  imports: [
    FormsModule,
    // MatSelectModule, MatInputModule...
  ]
})
export class AppModule { }

2. 核心逻辑是绑定完整的对象，而不是单独的name字段——这样选中后既能在输入框显示名称，又能随时获取对应的ID，完美解决你当前的问题。

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