如何将此 jQuery 代码转换为 Angular 2？答案

【问题标题】：How to convert this jQuery code to Angular 2?如何将此 jQuery 代码转换为 Angular 2？
【发布时间】：2016-04-26 07:04:43
【问题描述】：

我正在按照下面的 jQuery 示例将其转换为 Angular 2。有什么方法可以做到吗？我应该将 jQuery 集成到 Angular 2 中还是以任何方式集成到 Angular 2 中来实现这个目标？

示例网址：

http://www.designchemical.com/blog/index.php/jquery/create-add-remove-select-lists-using-jquery/

演示输出： http://www.designchemical.com/lab/jquery/demo/jquery_create_add_remove_select_list.htm

【问题讨论】：

标签： angular

【解决方案1】：

基于 Mark Rajcok 的回答：

Angular2: how bind to select multiple

您可以在模板中以这种方式实现此功能：

<form>
  <fieldset>

    <select name="selectfrom" id="select-from" multiple size="5" (change)="changeSelectFrom($event.target.options)">
      <option *ngFor="#elt of selectFromValues" [value]="elt.value">{{elt.name}}</option>
    </select>

    <a (click)="addElements()" id="btn-add">Add &raquo;</a>
    <a (click)="removeElements()" id="btn-remove">&laquo; Remove</a>

    <select name="selectto" id="select-to" multiple size="5" (change)="changeSelectTo($event.target.options)">
      <option *ngFor="#elt of selectToValues" [value]="elt.value">{{elt.name}}</option>
    </select>

  </fieldset>
</form>

在组件中：

@Component({
  (...)
})
export class App {
  @ViewChild('select-from') selectFromElRef;
  @ViewChild('select-to') selectToElRef;

  constructor() {
    this.selectFromValues = [
      { value: '1', name: 'Item 1' },
      { value: '2', name: 'Item 2' },
      { value: '3', name: 'Item 3' },
      { value: '4', name: 'Item 4' }
    ];

    this.selectToValues = [
      { value: '5', name: 'Item 5' },
      { value: '6', name: 'Item 6' },
      { value: '7', name: 'Item 7' }
    ];
  }

  getSelectedElements(options, values) {
    return Array.apply(null, options)
      .filter(option => option.selected)
      .map(option => {
        return values.find((elt) => elt.value === option.value);
      });
  }

  changeSelectFrom(options) {
    this.fromValues = this.getSelectedElements(options, this.selectFromValues);
  }

  changeSelectTo(options) {
    this.toValues = this.getSelectedElements(options, this.selectToValues);
  }

  addElements() {
    this.fromValues.forEach((elt) => {
      this.selectToValues.push(elt);
      let index = this.selectFromValues.findIndex((elt1) => elt1.value === elt.value);
      this.selectFromValues.splice(index, 1);
    });
  }

  removeElements() {
    this.toValues.forEach((elt) => {
      this.selectFromValues.push(elt);
      let index = this.selectToValues.findIndex((elt1) => elt1.value === elt.value);
      this.selectToValues.splice(index, 1);
    });
  }
}

看到这个 plunkr：https://plnkr.co/edit/5SQVErbgDaTyvHnjw7Wh?p=preview

【讨论】：

【解决方案2】：

一般经验法则：不要在使用 Angular2 时弄乱 DOM，而只操作您的数据，让 Ang2 使用其数据绑定来完成其余工作。这意味着我什至不会考虑在这里使用 jQuery。

采取的方法是：

将一些数据存储添加到您的组件（或您的组件正在使用的服务）。这可以像两个列表的 2 个数组一样简单。
修改您的模板，以便使用数据存储构建两个表单元素。
当用户使用 2 个按钮中的一个按钮触发操作时，相应地更改数据存储。
就是这样。 Ang2 将为您完成所有工作。

【讨论】：