自定义 ng-multiselect-dropdown 以便我们可以绑定多个模型字段答案

【问题标题】：Customize ng-multiselect-dropdown so we can bind multiple model fields自定义 ng-multiselect-dropdown 以便我们可以绑定多个模型字段
【发布时间】：2021-06-18 14:42:40
【问题描述】：

如何自定义ng-multiselect-dropdown控件，以便我们可以添加CodeField，它可以帮助我在选择时保持模型值？

【问题讨论】：

Please do not upload images of code/errors when asking a question.
你能详细说明你的问题吗？
ng-multiselect-dropdown 具有默认的可绑定属性，即 idField 和 textField。两个字段值都保持不变。上面的问题是如何在 ng-multiselect-dropdown 中再添加一个可绑定属性“codeField”？ CustomerList 模型 [ { Id : 1 , Name: 'customer1', Code : 'AD' Department: 'admin'}, { Id : 2 , Name: 'customer2', Code : 'SA' Department: 'sales'}, { ID：3，名称：'customer3'，代码：'OR' 部门：'Order'}]

标签： angular npm angular-material

【解决方案1】：

step1 : 我们可以参考下面的链接 https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby

第二步：

<angular2-multiselect id="CustomerControlId"
                                          [data]="CustomerList"
                                          formControlName="customerControl"
                                          [settings]="MultiSelectSettingsByGroup"
                                          (onSelect)="onItemSelect($event)"
                                          (onDeSelect)="onItemDeSelect($event)"
                                          (onSelectAll)="onSelectAll($event)"
                                          (onDeSelectAll)="onDeSelectAll($event)">
                    </angular2-multiselect>

第 3 步：设置

 this.MultiSelectSettingsByGroup = {
        singleSelection: false,
        text: "Select Fields",
        selectAllText: 'Select All',
        unSelectAllText: 'UnSelect All',
        searchPlaceholderText: 'Search',
        primaryKey:"Id",
        labelKey:"Name",
        enableSearchFilter: true,
        badgeShowLimit: 5,
        groupBy: "Code"
    };

第 4 步：在 CustomerList 中加载列表。

CustomerList: DropdownItemExt[] = [];

export class DropdownItemExt {
Id: string;
Code: string;
Name: string;

}

第 5 步：您可以在反应式表单中放置 'fb' is formBuilder

return this.fb.group({
        customerControl: new FormControl(this.Fsmodel.customers), // model class property , optional for initializing from FsModel

第 6 步：您可以找到选定的客户

this.rcForm.get('customerControl').value as DropdownItemExt[];

第 7 步：设置配置区分大小写，请参阅第 3 步和第 4 步。

【讨论】：