如何使用REST API将JSON值链接到Angular2中的下拉字段？

Question

我正在Web应用程序的前端工作，并且想在我单击HTML页面上的下拉值时接收JSON对象数据。

有人请向我解释如何做到这一点。

Answer 1

如果希望将对象json保存为选择元素的模型值，则可以通过在option元素上使用ngValue来使用它。

<select [(ngModel)]="selected">
         <option *ngFor="let value of values" [ngValue]="value">{{value.name}}</option>
      </select>|

您可以在此处看到一个有效的示例。

如果要在选择值时对值做某事，可以侦听ngModelChange事件。

<select [(ngModel)]="selected" (ngModelChange)="handleChange($event)">
         <option *ngFor="let value of values" [ngValue]="value">{{value.name}}</option>
      </select>|

并定义要在控制器中调用的方法。

export class App {
  name:string;
  selected = null;
  values = [{name:'a'}, {name:'b'}, {name:'c'}]
  history = [];
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  handleChange(value) {
    this.history.push(value);
  }
}

一个有效的例子可以在这里找到。