Question

我有两个多选列表。将所选项目从第二个列表复制到第一个列表的最简单方法是什么？我必须使用最终列表并将其发送到webapi。

我知道如何在平面javascript中执行此操作，但使用打字稿我需要一些帮助。

  student.component.html:

    <h5>Final student list</h5>
    <div class="col-xs-6">
        <select name="multiselect1" multiple class="form-control" name="myselecttsms1">
        </select>
        <br>
    </div>

    <h5>Students</h5>
    <div class="col-xs-6">
        <select name="multiselect2" multiple class="form-control" name="myselecttsms2">
            <option *ngFor="let student of students" value="{{ student.Id }}">{{ student.Name }}</option>
        </select>
        <br>
    </div>

student.component.ts:

     onGetStudents() {
        this.studentService.getStudents()
          .subscribe(
          (students: any[]) => this.students = students,
          (error) => console.log(error),
        );
      }


  student.service.ts:

      getStudents() {
            const headerParameters =
                new Headers({
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')

                });
            return this.http.get(environment.baseUrl + '/api/Queues',
                { headers: headerParameters })
                .map(
                (response: Response) => {
                    const data = response.json();
                    return data;
                }
                )
                .catch(
                (error: Response) => {
                    console.log(error);
                    return Observable.throw(error);
                }
                );
        }

Answer 1

首先你必须安装这个模块，用于多选

npm i angular-2-dropdown-multiselect --save

然后将这些添加到导入语句

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MultiselectDropdownModule } from 'angular-2-dropdown-multiselect';

然后在组件中执行此操作

import { Component } from '@angular/core';
import { FormBuilder, Validators, AbstractControl, FormGroup } from '@angular/forms';
import {IMultiSelectOption} from 'angular-2-dropdown-multiselect';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items:IMultiSelectOption[]  = [{
    id: 1, name: 'test'
  }, {
    id: 2, name: 'test2'
  }, {
    id: 3, name: 'test3'
  }]
  form: FormGroup
  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      multiSelect: [[''], Validators.required],
      multiSelect2: [[''], Validators.required]
    });

  }

  saveForm() {
    this.form.controls['multiSelect'].setValue(this.form.controls['multiSelect2'].value)
  console.log(this.form); 
  }
}

在html中添加这些

<form [formGroup]="form">
  <h2>Hello {{name}}</h2>

  <ss-multiselect-dropdown formControlName="multiSelect" [options]="items" ></ss-multiselect-dropdown>
  <ss-multiselect-dropdown formControlName="multiSelect2" [options]="items" ></ss-multiselect-dropdown>
  <button (click)="saveForm()" >save</button>
</form>

如何将所选项添加到打字稿中的另一个多项选择（Angular 4项目）

1 个答案: