以角度 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”的值。我基本上想将在另一个调用中接收到的区域显示为从预先确定的数组中选择的选择显示，该数组也包含该值。

在这个 plunker 中尝试过。做不到。 https://plnkr.co/edit/njGlIV?p=preview

谢谢。

Answer 1

我认为您的 <option>

上缺少 [value] 属性

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

如果您已经将 select 元素与模型绑定在一起，我认为实际上不需要 selected。您的选择没有反映的原因是因为您的选择没有价值。

更新：

根据您的 plunkr，我添加了一个模拟的 http 调用来从 Observable 中检索一个值。从流中接收到值后，我立即更新了我的模型。

//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;
  }
}