Angular 5默认值未默认选择

Question

当您使用 ngFor 循环为选项创建选择时，不会选择来自 ngModel 的默认值

HTML：

<form style="margin : 20%;">
    <div class="row">
        <div class="form-group">
            <label for="foo">K1 :{{keyboard | json}}</label>
            <select [(ngModel)]="keyboard" name="foo" class="custom-select"> 
                <option *ngFor="let a of foo" [ngValue]="a">{{a.name}}</option> 
            </select>
        </div>
    </div>
    <div class="row">


        <div class="form-group">
            <label for="fooz">K2 :{{keyboard2 | json}}</label>
            <select [(ngModel)]="keyboard2" name="fooz" class="custom-select"> 
                <option [ngValue]="foo[0]">AZERTY</option> 
                <option [ngValue]="foo[1]">QWERTY</option> 
            </select>
        </div>
    </div>
    <div class="row">


        <div class="form-group">
            <label for="fooa">K2 :{{keyboardStr | json}}</label>
            <select [(ngModel)]="keyboardStr" name="fooa" class="custom-select"> 
                <option [selected]="keyboardStr == 'AZERTY'" [ngValue]="AZERTY">AZERTY</option> 
                <option [selected]="keyboardStr == 'QWERTY'" [ngValue]="QWERTY">QWERTY</option> 
            </select>
        </div>
    </div>
    <div class="row">

        <div class="form-group">
            <label for="fooa">K2-bis :{{keyboardStr | json}}</label>
            <select [(ngModel)]="keyboardStr" name="fooa" class="custom-select"> 
                <option [selected]="keyboardStr == 'AZERTY'" [value]="AZERTY">AZERTY</option> 
                <option [selected]="keyboardStr == 'QWERTY'" [value]="QWERTY">QWERTY</option> 
            </select>
        </div>
    </div>
    <div class="row">

        <div class="form-group">
            <label for="fooa">K2-ter :{{keyboardStr | json}}</label>
            <select [(ngModel)]="keyboardStr" name="fooa" class="custom-select"> 
                <option [selected]="keyboardStr == 'AZERTY'" value="AZERTY">AZERTY</option> 
                <option [selected]="keyboardStr == 'QWERTY'" value="QWERTY">QWERTY</option> 
            </select>
        </div>
    </div>
</form> 

组件：

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    private foo: any[] = [{id: 1, name: "AZERTY"}, {id: 2, name: "QWERTY"}];
    private keyboard: any = {id: 1, name: 'AZERTY'};
    private keyboard2 : any = {id: 1, name: 'AZERTY'};
    private keyboardStr : string = 'AZERTY';

  constructor() { }

  ngOnInit() {
  }

}

结果：

不应该默认选择AZERTY吗？

同时使用 ngModel 和 ngValue 是否有冲突？ 因为在 K1 示例的情况下，值不能用作 'a' 是一个对象吗？

编辑：

@Roy D. Porter 好的，但想象一下我有这个“单元”对象：

{
  "id": 1,
  "type": "REMISE",
  "owner": "OWN",
  "to": {
    "id": 1,
    "alone": true,
    "level": 1,
    "name": "Participant",
    "minSales": 0.0,
    "minTeamNumber": 0,
    "durationCondition": 0,
    "durationAwardCondition": null
  },
  "limit": 0.0,
  "percentage": 25.0,
  "alone": true
}

这将很好地显示类型，因为模型是一个字符串：

<select [(ngModel)]="unit.type" name="tye" class="custom-select">
                    <option *ngFor="let type of types" [ngValue]="type">{{type | camelCase}}</option>
                </select>

这不会显示它应该显示的默认值： {{奖项名称 |骆驼香烟盒}}

我认为这是由于奖励不是字符串造成的。据我所知，当它是一个字符串时会选择 ngModel 而不是当它是一个对象时。

Angular v5.0.0

Answer 1

当您在选项上使用 [ngValue] 时，在选择上使用 [compareWith]。 给它一个比较两个对象的函数（在你的 ngValue 和 ngModel 对象的类型中）。

您在此处的文档中有示例：https://angular.io/api/forms/SelectControlValueAccessor

最好的问候

Answer 2

我遇到了和你一样的问题。

我通常的解决方案是在列表中添加一个选项，并将其值设置为 -1，并将绑定变量初始化为 -1。

所以在你的情况下：

        <select [(ngModel)]="keyboard" name="foo" class="custom-select">
            <option value="-1">Please select an answer</option>
            <option *ngFor="let a of foo" [ngValue]="a">{{a.name}}</option> 
        </select>

然后在您的组件控制器中，将 keyboard 变量初始化为 -1。