角度選擇設置顯示2

Question

我想將選擇標記的顯示設置爲通過另一個調用獲得的值。但即使嘗試[selected]，[ngValue]，[value]等，我也無法做到這一點。

<select class="form-control" [(ngModel)]="selectedRegion" name="Region" (ngModelChange)="onRegionChange(selectedRegion)" val="true" id="cloud-region" > 
         <option *ngFor="let region of regions" [selected]="selectedRegion.Name===region.Name?'region.Name':null">{{region.Name}}</option> 
</select> 

我通過Observable中的http響應獲取數據後，設置了「selectedRegion」的值。我基本上想要顯示在另一個調用中接收到的區域，作爲從包含該值的預定義數組中選擇的選擇顯示。

在這個闖關者身上試過了。不能這樣做。 https://plnkr.co/edit/njGlIV?p=preview

謝謝。

Answer 1

我相信你在缺少[值]屬性您<option>

<select 
 
    class="form-control" 
 
    [(ngModel)]="selectedRegion" name="Region" 
 
    (ngModelChange)="onRegionChange(selectedRegion)" 
 
    val="true" 
 
    id="cloud-region"> 
 
    
 
    <option 
 
    *ngFor="let region of regions" 
 
    [value]="region.Name" 
 
    [selected]="selectedRegion.Name===region.Name?'region.Name':null">{{region.Name}}</option> 
 
</select>

我不認爲選擇的實際需要，如果你已經綁了你用模型選擇元素。您的選擇沒有反映的原因，因爲您的選擇沒有價值。

更新：

根據您plunkr，我添加了一個模擬HTTP調用來檢索從可觀察到的一個值。一旦我從流中收到價值，我立即更新了模型。

//our root app component 
 
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core' 
 
import {Observable} from 'rxjs/Observable'; 
 
import {Observer} from 'rxjs/Observer'; 
 
//import 'rxjs/Rx'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template:` 
 
    <h1>Selecting Number</h1> 
 
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()"> 
 
     <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option> 
 
    </select> 
 
    {{levelNum}} 
 
    `, 
 
}) 
 
export class AppComponent { 
 
    levelNum:number = 0; 
 
    levels:Array<Object> = [ 
 
     {num: 0, name: "AA"}, 
 
     {num: 1, name: "BB"} 
 
    ]; 
 
    
 
    ngOnInit(){ 
 
    this.fakeHttpCall() 
 
    .subscribe(res => { 
 
     this.levelNum = res; 
 
    }); 
 
    } 
 

 
    toNumber(){ 
 
    this.levelNum = +this.levelNum; 
 
    console.log(this.levelNum); 
 
    } 
 
    
 
    fakeHttpCall(){ 
 
    let request = new Observable(
 
     obs => { 
 
     let timeout = setTimeout(() => { 
 
      obs.next(1); 
 
      obs.complete(); 
 
      clearTimeout(timeout); 
 
     },2000); 
 
     } 
 
    ); 
 
    
 
    return request; 
 
    } 
 
}