首页 > 解决方案 > 2 方式数据绑定在 ng-select Angular 6 中不起作用

问题描述

我在我的应用程序中使用 ng-select。

我的组件类是

export class ExampleComponent {
     selectedCoursesList: Course[] = [];
     courseList: any[] = [];

     removeCourse( course: Course) {
         this.selectedCoursesList.forEach((item, index) => { 
          if (item === course) { 
                this.selectedCoursesList.splice(index, 1);          
          }
        });
    }
 }

我的html是

     <ng-select  placeholder="Choose course" [multiple]="true" 
        (ngModelChange)="updatecourse($event);" 
        [(ngModel)]="selectedCoursesList">
        <ng-option *ngFor="let course of courseList" [value]="course" >
                    {‌{course.name}} 
        </ng-option>
     </ng-select>

在这里我想实现两件事

  1. 取消选择 ng-select 的特定选定值
  2. 2路数据绑定

谁能告诉我我做错了什么?

谢谢你

标签: angularangular62-way-object-databinding

解决方案


我通过在我的 [formControl]="courses"

     <ng-select  [formControl]="courses" placeholder="Choose course" [multiple]="true" 
         [(ngModel)]="selectedCoursesList">
            <ng-option *ngFor="let course of courseList" [value]="course" >
                {‌{course.name}} 
            </ng-option>
      </ng-select>

在我的 removeCourse 方法中我添加了

this.courses.setValue(this.selectedWinaryList);

 export class ExampleComponent {
    selectedCoursesList: Course[] = [];
    courseList: any[] = [];
    courses= new FormControl();
    removeCourse( course: Course) {
         this.selectedCoursesList.forEach((item, index) => { 
             if (item === course) { 
                 this.selectedCoursesList.splice(index, 1);          
             }
         });
         this.courses.setValue(this.selectedWinaryList);
     }
 }

当我从数组中删除课程时,它会自动从选择列表中取消选择该课程。


推荐阅读