javascript - 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>

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

我认为这是由于 award 不是字符串造成的。据我所知，当 ngModel 是字符串时会被选中，但当它是对象时则不会。

Angular v5.0.0

Answer 1

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

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

最好的问候