角度选择设置显示2
问题描述:
我想将选择标记的显示设置为通过另一个调用获得的值。但即使尝试[selected],[ngValue],[value]等,我也无法做到这一点。角度选择设置显示2
<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
谢谢。
答
我相信你在缺少[值]属性您<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;
}
}
在尝试它它显示值但在selectedRegion.Name但另一个对象的阵列中不是一个反射。你可以通过编辑上面的plunker来显示它,通过在组件中设置它的值来显示选项中的第二个作为显示器?非常感谢。 –
@SandeepBhat请参考我的更新,希望它对你有所帮助。 – gyeong
在您的选项标签中添加[ngValue] =“region.name”。值只需要字符串类型,您需要NgValue来处理复杂的值,如对象。 –