选择标签上的角度多属性改变了选项标签的值

Question

当我在 select 标签上使用 multiple 属性时，Angular 会改变 option 标签的值。例如：

this.options = [
  { id: 1, name: 'me' },
  { id: 2, name: 'you' }
];

<select [(ngModel)]="model" multiple>
  <option *ngFor="let o of options" [value]="o.id"> {{o.name}} </option>

</select>

结果 =>

<option value="0: '1'">me</option>
<option value="1: '2'">you</option>

Angular 将数组中对象的索引添加到选项标签的值之前。有没有办法阻止这种行为？

Answer 1

好的，我最终得到了自定义 directive。我称它为multipleNormalize 并像[multipleNormalize]="o.id" 一样使用它

打字稿

import {Directive, ElementRef} from '@angular/core';
import {Input} from '@angular/core';

@Directive({
    selector: '[multipleNormalize]',
})

export class MultipleNormalizeDirective {

    @Input('multipleNormalize') model:any;

    constructor(private elementRef:ElementRef) {
    }

    ngOnInit(): void {
        this.elementRef.nativeElement.value = this.model;
    }


}

HTML

<select [(ngModel)]="testModel" multiple>
            <option *ngFor="let o of optionItems" [ngValue]="o.id" [multipleNormalize]="o.id">{{o.name}}</option>
</select>

Answer 2

使用[ngValue] 代替[value]。

<select [(ngModel)]="model" multiple>
  <option *ngFor="let o of options" [ngValue]="o.id"> {{o.name}} </option>
</select>