Question

我在应用程序中使用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>

我想在这里实现两件事

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

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

谢谢

Answer 1

我在我的

中添加了[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);
     }
 }

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

Answer 2

首先，您应该像这样使用ngselect

<ng-select class="custom" placeholder="Select type of Faq Post"
   [(ngModel)]="selectedType"
   [items]="mapedData"
   bindLabel="value"
   bindValue="key"
   (change)="dataModelChanged()">
 </ng-select>

和ngselector会自动绑定值，因此您无需使用ng-option即可。 ngSelect也有change方法，它是输出事件发射器。

 dataModelChanged() {
    console.log(this.selectedType);
  }

现在，每次ngselector的值更改时，您将拥有ngModel的值，该值将存储在selectedType中

2方式数据绑定在ng-select Angular 6中不起作用

2 个答案: