バインディングの選択/オプション

Question

私は選択要素をバインドしようとした際に根本的な欠陥があると思います。

[（ngModel）] = "selectedPrivilege"のように選択した場合、選択は何も選択されずに開始されます。モデルバインディングを削除すると、[selected]属性が機能し、適切なオプションが選択されますが、（ngModelChange）をバインドしていないモデルは機能しなくなります。

私はここで何か愚かなことをやっていると仮定しています。

<div class="form-group"> 
     <label for="privilegeDDL">Privilege</label> 
     <select *ngIf="privileges.length > 0" class="form-control" id="privilegeDDL" required [(ngModel)]="selectedPrivilege" (ngModelChange)="onPrivilegeChange($event)"> 
     <option *ngFor="let p of privileges" [ngValue]="p" [selected]="p.level===user.privilege.level"> {{p.name}}</option> 
     </select> 
    </div> 

Answer 1

あなたはオプションは、空の選択が表示されないようにするために、を取ることができます可能な値の1に等しいselectedPrivilegeに初期値を割り当てる必要があります。
もう1つのことは、p.levelまたはp.nameのいずれかのオプションのngValueをバインドする必要があります。
ネイティブHTMLオプション要素の値をpにバインドすることはできません。複雑なオブジェクトであるため、コードから理解したものからです。
したがって、ngModelをp.levelにバインドする場合は、レベルがとりうる値の1つにselectedPrivilegeを設定する必要があります。ここで
は実施例である：

@Component({ 
    selector: 'exmaple', 
    template: ` 
    <div class="form-group"> 
     <label>Privilege</label> 
     <select [(ngModel)]="selectedPrivilege" (ngModelChange)="onPrivilegeChange($event)"> 
     <option *ngFor="let p of privileges" [ngValue]="p.level"> {{p.name}}</option> 
     </select> 
    </div> 
    `, 
}) 

export class Example { 

    privileges = [ 
    { 
     name: 'Option 1', 
     level: '1', 
    }, 
    { 
     name: 'Option 2', 
     level: '2', 
    }, 
    { 
     name: 'Option 3', 
     level: '3', 
    }, 
    ]; 

    public selectedPrivilege = '1'; 

    public onPrivilegeChange(value: any) { 

    // Making sure that the two-way data binding works properly 
    console.log('select value', value); 
    console.log('selectedPrivilege', this.selectedPrivilege); 
    } 

}