角度选择设置显示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; 
 
    } 
 
}