停止使用JQuery！

Question

我必须使用option文件设置我的选择的JSON值。 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' },
];

Select - Angular 2

1 个答案:

停止使用JQuery！