Angular 15中select元素ngValue值被截断至50字符的解决咨询

问题原因 #

ngValue本身并没有50字符的限制，问题出在通过event.target.value获取值的方式上。Angular处理[ngValue]绑定时，不会直接把完整长字符串赋值给原生<option>的value属性——为了规避原生DOM的潜在限制，Angular会对较长字符串做截断（保留前50字符）或生成内部标识，而真正的完整值会被Angular维护在双向绑定的上下文里。

解决方法 #

• 方法一：直接使用双向绑定变量
  既然已经通过[(ngModel)]="selectedValue"实现了双向绑定，组件内的selectedValue已经同步了完整的选中值，完全不需要通过event.target.value获取：

  onChange() {
    console.log(this.selectedValue); // 输出完整字符串
  }
  

  对应HTML可简化为：

  <select [(ngModel)]="selectedValue" (change)="onChange()">
    <option *ngFor="let item of items" [ngValue]="item.longStringValue">{{ item.displayValue }}</option>
  </select>
  

• 方法二：通过自定义数据属性获取
  如果必须从事件对象中取值，可以在<option>上绑定自定义data-*属性，再通过原生DOM API读取：

  <select [(ngModel)]="selectedValue" (change)="onChange($event)">
    <option *ngFor="let item of items" [ngValue]="item.longStringValue" [data-value]="item.longStringValue">{{ item.displayValue }}</option>
  </select>
  

  TypeScript代码调整为：

  onChange(event: Event) {
    const selectElement = event.target as HTMLSelectElement;
    const selectedOption = selectElement.selectedOptions[0];
    if (selectedOption) {
      console.log(selectedOption.dataset.value); // 输出完整字符串
    }
  }
  

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