深入理解Datalist：如何精确控制输入内容并进行条件渲染

<!-- app.component.html -->
<label for="itemInput">选择或输入一个项目:</label>
<input type="text" id="itemInput" list="availableOptions" [(ngModel)]="selectedItemDisplay" (input)="onItemSelect($event)">

<datalist id="availableOptions">
  <option *ngFor="let item of availableItems" [value]="item.displayValue"></option>
</datalist>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedItemDisplay: string = ''; // 用于ngModel绑定，显示在输入框中的值
  selectedItemId: number | null = null; // 存储选中的实际ID

  availableItems = [
    { id: 101, name: '苹果', displayValue: '苹果 (水果ID: 101)' },
    { id: 102, name: '香蕉', displayValue: '香蕉 (水果ID: 102)' },
    { id: 103, name: '樱桃', displayValue: '樱桃 (水果ID: 103)' }
  ];

  onItemSelect(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value;
    console.log('用户输入或选择的值:', inputValue);

    // 在这里可以进行初步处理，例如查找匹配项
    const matchedItem = this.availableItems.find(item => item.displayValue === inputValue);
    if (matchedItem) {
      console.log('匹配到选项:', matchedItem.name);
      // 后续步骤将详细说明如何处理输入框显示和存储实际数据
    } else {
      console.log('当前输入值未完全匹配任何预设选项。');
      this.selectedItemId = null; // 如果不匹配，清空ID
    }
  }
}

// app.component.ts (修改 onItemSelect 方法)
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedItemDisplay: string = '';
  selectedItemId: number | null = null; // 用于存储选中项的实际ID

  availableItems = [
    { id: 101, name: '苹果', displayValue: '苹果 (水果ID: 101)' },
    { id: 102, name: '香蕉', displayValue: '香蕉 (水果ID: 102)' },
    { id: 103, name: '樱桃', displayValue: '樱桃 (水果ID: 103)' }
  ];

  onItemSelect(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value;
    const matchedItem = this.availableItems.find(item => item.displayValue === inputValue);

    if (matchedItem) {
      // 如果找到匹配项，将输入框的值设置为我们想要的核心部分（例如：name）
      this.selectedItemDisplay = matchedItem.name;
      this.selectedItemId = matchedItem.id; // 存储实际的ID
      console.log('输入框显示值已更新为:', this.selectedItemDisplay, '，存储ID:', this.selectedItemId);
    } else {
      // 如果用户输入的值不在datalist中，或者用户正在手动输入
      this.selectedItemDisplay = inputValue; // 保持用户当前输入
      this.selectedItemId = null; // 清空ID，表示当前输入未匹配任何有效选项
      console.log('用户输入的值未匹配预设列表或正在输入:', inputValue);
    }
  }
}