جاوااسکریپت - مقدار پیشفرض در Angular 5 بهطور پیشفرض انتخاب نمیشود

وقتی یک سلکت با حلقه ngFor برای گزینهها ایجاد میکنید، مقدار پیشفرض از ngModel انتخاب نمیشود

اچتیامال :

<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، نمیتوان از value استفاده کرد چون 'a' یک شیء است، درست است؟

ویرایش :

@Roy D. Porter خب، اما تصور کنید که من این شیٔ 'unit' را دارم :

{
  "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>

این مقدار پیشفرضی که باید نمایش داده شود را نشان نمیدهد: {{award.name | camelCase}}

من فرض میکنم این به این دلیل است که award یک رشته نیست. از آنچه که میبینم، ngModel زمانی که یک رشته باشد انتخاب میشود اما هنگامی که یک شیء باشد انتخاب نمیشود.

انگولار نسخه ۵.۰.۰

پاسخ شماره ۱

وقتی از [ngValue] در option استفاده میکنید، از [compareWith] در select استفاده کنید. به آن تابعی بدهید که دو شیء را مقایسه کند (در نوع شیءهای ngValue و ngModel شما).

شما مثالها را در این سند دارید: https://angular.io/api/forms/SelectControlValueAccessor

با بهترین آرزوها

پاسخ شماره ۲

من با همان مشکلی که تو داری روبرو شدهام.

راهحل معمول من این است که یک گزینه به فهرست اضافه کنم و مقدار آن را روی -۱ قرار دهم و متغیر متصل شده را نیز روی -۱ مقداردهی اولیه کنم.

پس در مورد شما:

        <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 تنظیم کنید.