Question

我有一个如下所示的API数组 -

    [
     "abcdefg",
     "xyshgje",
     "fjgyros"
    ]

我试图从angualr 2中的数组中捕获所选对象的值 -

<select (change)="onChangeofOptions($event.target.value)" name="someName" class="form-control">
                <option value="A">All</option><br>
                <option *ngFor="let tam of tamValues" value="tam">{{tam}}</option>
              </select>

上面的代码在从下拉列表中选择ALL时按预期打印（在控制台中）“A”。当我从数组列表中选择一个值时，它会打印“tam”。对数组的API调用如下所示 -

 ngOnInit() {
    this.http.get("http://example.url.com")
      .map((res: Response) => (
        res.json()
      ))
      .subscribe(result=> {
        this.tamValues= result;
      })
  }

我在这里做错了吗？我想从下拉列表中填充的数组中打印选定的值。

Answer 1

使用[value]="tam"

<select (change)="onChangeofOptions($event.target.value)" name="someName" class="form-control">
                <option value="A">All</option><br>
                <option *ngFor="let tam of tamValues" [value]="tam">{{tam}}</option>
              </select>

DEMO

Answer 2

推荐的方法是将 ngModel 与 ngModelChange 事件一起使用，如下所示

<select [(ngModel)]="selectedtam" (ngModelChange)="onChangeofOptions($event)">
   <option value="A">All</option><br>
      <option *ngFor="let tam of tamValues" value={{tam}}>{{tam}}</option>
</select>

DEMO

如何从下拉API

2 个答案: