javascript - Select - Angular 2 的设定值

Question

我必须使用 JSON 文件设置我的选择的 option 值。对象如下:

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来获取confName的value,key我想为每个每个

做这件事

Answer 1

停止使用 JQuery!

这会适得其反:您使用的先进平台可以让您的生活变得更加轻松，但您却安装了另一个库来完成它应该做的事情。

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

您想为您的选择指定一个值吗？以下是如何在 Angular 中执行此操作。

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

<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' },
];