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
}

这将很好地显示类型,因为model是一个字符串:

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

这不显示它应该的默认值:{{award.name | 骆驼香烟盒}}

我认为这是因为奖励不是一个字符串.从我看到的,当它是一个字符串时,选择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。