angular - 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>
在这里我想实现两件事
- 取消选择 ng-select 的特定选定值
- 2路数据绑定
谁能告诉我我做错了什么?
谢谢你
解决方案
我通过在我的 [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);
}
}
当我从数组中删除课程时,它会自动从选择列表中取消选择该课程。
推荐阅读
- mongodb - 如何使用 Mongodb 验证器验证非空字段
- sql - insert into statements,如何快速插入记录
- javascript - 可调整大小的拆分 DIV Vue.js
- flutter - 如何在颤动中管理开关小部件的原生外观
- android - queryPurchases() 返回一个空列表
- html - 防止 Flexbox 变大,截断文本
- c++ - 如何解析包含整数的字符串并检查是否大于C++中的最大值
- javascript - 我如何/可以通过在请求正文中使用 x-www-form-urlencoded 来发送我的有效负载的 RxJs POST 请求
- android - 如何柔化和调整cameraX中预览和抓图的亮度?
- javascript - 使用 R Shiny 比较条件面板中的日期