Question

我正在尝试将select标签的显示设置为通过另一个调用获得的值。但即使在尝试[选择]，[ngValue]，[值]等后，我也无法这样做。

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

上的 [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元素与模型捆绑在一起，我认为实际上并不需要选择。你的选择没有反映的原因是因为你的选项没有价值。

更新：

根据你的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;
  }
}

设置角度2的选择显示

1 个答案: