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

【问题标题】：2 Way data binding not working in ng-select Angular 62 方式数据绑定在 ng-select Angular 6 中不起作用
【发布时间】：2019-01-01 17:54:05
【问题描述】：

我在我的应用程序中使用 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路数据绑定

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

谢谢

【问题讨论】：

你必须告诉我们你遇到了什么错误。
我没有收到任何错误。我在 html 中使用 selectedCourseList 作为 {{ selectedCoursesList }} 。它不会删除课程对象。
您的模板不起作用？你能更新stackblitz.com中的代码吗？
当然使用{{selectedCoursesList }}，不会删除Course[]，因为它是组件属性，直接绑定到对应的模板。因此，您有一个不工作的 Template/HTML 。如果使用“{{selectedCoursesList }}”也会报错
@JitendraAhuja，1. 最初我的 selectedCoursesList 是空的 2. 当我从 ng-select multiple => selectedCoursesList 中选择一门课程时，它有一个对象 3. 当我从选择列表中选择第二门课程时，它有两个对象.当你选择一门课程时，我会打电话给<app-body-component *ngFor = "let course of selectedCoursesList" [course]="course" (removeCourse)="removeCourse($event)"> </app-body-component> 4. 在子组件中，我有一个按钮可以从列表中删除课程。

标签： angular angular6 2-way-object-databinding

【解决方案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);
     }
 }

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

【讨论】：

您的提案在 Angular v6 中已弃用，并将在 v7 中删除。 angular.io/api/forms/FormControlDirective#use-with-ngmodel

【解决方案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 中

【讨论】：

【解决方案3】：

使用（更改）来自 html 的事件，如下所示

  <ng-select [items] = "arrobjCategories"  bindLabel = "name"
bindValue = "id" [(ngModel)] = "selectedProductCategoryId"
(change) = "onProductCategoryChange($event)"> </ng-select>

在类型脚本文件中使用更改事件，如下所示

  public onProductCategoryChange(event){
    console.log(event);
  }

这里的事件将包含实际选择的数据。

【讨论】：