Select - Angular 2 的设置值

Question

我必须使用JSON 文件设置我的选择的option 值。 Object 如下：

export class Car {
  ID: String;
  Name: [{
    confName: String
    }
  }]
}

我正在尝试使用以下代码进行设置：

this.baseService.getCars(message)
    .subscribe(cars => {
    this.cars = cars;
    myCars = this.cars; //Car is a global variable
    });

var $el = $("#carSelect");
$el.empty(); // remove old options
$.each(myCars, function (key, value) {
$el.append($("<option></option>")
    .attr("value", value).text(key));
});

我知道要访问其中之一的confName，我需要使用console.log(myCars[0].Name.confName);，所以错误可能在这里：

 $.each(myCars

因为我需要访问Name 才能获得value,key 的confName 我想为每个each做它

Answer 1

停止使用 JQuery ！

这适得其反：您正在使用一个可以让您的生活变得如此轻松的高级平台，但您安装了另一个库来完成它应该做的事情。

不仅会加载不必要的代码，还会降低应用程序的速度并迫使其他开发人员了解 JQuery。

你想给你的选择一个值吗？以下是在 Angular 中的操作方法。

首先，创建您的选择和选项，并为其绑定一个值。

<select [(ngModel)]="mySelect">
  <option *ngFor="let opt of myOptions" [value]="opt">{{ opt}}</option>
</select>

然后，在 TS 中创建变量，并在构造函数中设置 select 的值。

export class myComponent {
  mySelect: string;
  myOptions: ['option 1', 'option 2', 'option 3'];
  constructor() {
    this.mySelect = this.myOptions[0];
  }
}

您的选择现在具有您的第一个选项的价值。

如果你想使用服务，就这样做

export class myComponent {
  mySelect: string;
  myOptions: ['option 1', 'option 2', 'option 3'];
  constructor() {
    this.loadCars();
  }
  loadCars() {
    this.baseService.getCars(message)
      .subscribe(cars => {
        this.myOptions= cars;
        this.mySelect= cars[0];
    });
  }
}

编辑如果你想使用对象：

<select [(ngModel)]="mySelect">
  <option *ngFor="let opt of myOptions" [value]="opt.value">{{ opt.desc }}</option>
</select>

在你的 TS 中

myOptions: [
  { value: 1, desc: 'option 1' },
  { value: 2, desc: 'option 2' },
  { value: 3, desc: 'option 3' },
];