Question

当以这种方式在模板中定义选择输入的选项时：

<select formControlName="gender">
    <option *ngFor="let g of genders" [ngValue]="g.code">{{g.name}}</option>
</select>

呈现控件：

<select class="ng-pristine ng-valid ng-touched" formcontrolname="gender" ng-reflect-name="gender">
    <option ng-reflect-ng-value="0: 71011">Dona</option>
    <option ng-reflect-ng-value="1: 71012">Home</option>
    <option ng-reflect-ng-value="2: 71013">Desconegut</option>
</select>

效果很好，对于所选的选项，该值将从FormGroup中恢复为数字。

现在我正在尝试开发一个加载任何具有相同结构（代码/名称）的参数列表的组件，为此，我已经定义了组件：

@Component({
    selector: 'select[selectLoader]',
    template: `
        <option *ngFor="let parameter of parametersArray" [ngValue]="parameter.code">{{parameter.name}}</option>                `
})

在组件的内部代码中，参数列表从属性family的值中正确加载（提供参数族的代码）。不同之处在于，在两种情况下代码都是数字，在该代码中呈现组件：

<select class="c3 ng-pristine ng-valid ng-touched" family="GENDER" formcontrolname="gender" selectloader="" ng-reflect-name="gender" ng-reflect-family="GENDER">
    <option ng-reflect-ng-value="71011">Dona</option>
    <option ng-reflect-ng-value="71012">Home</option>
    <option ng-reflect-ng-value="71013">Desconegut</option>
</select>

在这种情况下， FormGroup返回的值是一个字符串而不是一个数字，所以虽然选项的模板部分是相同的，但它的呈现方式不同，并且返回的值不是“＃”。 t与ngValue类型对应。

在这两种情况下，ngValue定义[ngValue]="parameter.code"为code，但第二个被视为字符串。

为什么会有所不同，我该怎么做？

更新：这是example in stakblitz。我发现甚至完全忽略了ngValue并将内容文本作为值。

Answer 1

NgSelectOption想要从SelectControlValueAccessor注入@Host()，但在您的情况下主机不会提供它。

https://github.com/dart-lang/angular/blob/e22f0e9ef32dd162c2ce0c9d17271341ef4c40d9/angular_forms/lib/src/directives/select_control_value_accessor.dart#L101-L103

这会导致NgSelectOption指令的其余部分表现不同

https://github.com/dart-lang/angular/blob/e22f0e9ef32dd162c2ce0c9d17271341ef4c40d9/angular_forms/lib/src/directives/select_control_value_accessor.dart#L103-L133

导致你所描述的行为。

我还没有办法解决问题（我的尝试https://stackblitz.com/edit/angular-p89pvz?file=app/select_loader.component.ts）

选择输入，ngValue in选项在Angular 2组件中有所不同

1 个答案: