Question

如何将所选项目传递到另一个列表，以便稍后我可以使用最终的对象/数组？

student.component.ts：

students= [];
studentsFinal = [];

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

student.component.html：

        <h5>Final student list</h5>
        <div class="col-xs-6">
            <select name="multiselect1" multiple class="form-control" name="myselecttsms1">
<option *ngFor="let studentFinal of studentsFinal" value="{{ studentFinal.Id 
}}">{{ studentFinal.Name }}</option>
            </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>

Answer 1

将[ngModel]添加到您的选择和（ngModelChange）=“selectedStudents（$ event）”事件

<select [ngModel]="assignedStudents" (ngModelChange)="selectedStudents($event)" name="multiselect2" multiple class="form-control">
    <option *ngFor="let student of students" [ngValue]="student">{{ student.Name }}</option>
</select>

在你的ts文件中添加selectedStudents（）函数：

temporaryArray = [];
selectedStudents(students){
   this.temporaryArray = students;
}

//called on button click
assigne(){
   this.assignedStudents = this.temporaryArray;
}

然后

<select multiple class="form-control">
    <option *ngFor="let student of assignedStudents" [ngValue]="student">{{ student.Name }}</option>
</select>

基于问题和评论的完整示例：https://stackblitz.com/edit/multiselect-from-one-array-to-other

如何将所选项目添加到另一个多角度的选择中？

1 个答案: