剑道多选不显示以前选择的项目

Posted 2023-05-07

【中文标题】剑道多选不显示以前选择的项目

【英文标题】：Kendo Multiselect not showing the previously selected items

【发布时间】：2019-10-21 01:24:32

【问题描述】：

我正在尝试填充剑道多选控件。数据确实绑定到控件，我可以看到货币对象中的所有货币，但它会显示 ngmodel 中先前选择的货币。如何显示所选货币？

                    <kendo-multiselect [data]="LegalFundClasses.Currencies" style="height: 29.5px;"
                            [(ngModel)]="f.OtherCurrencyName" [textField]="'Name'" [valueField]="'Id'"
                            [autoClose]="false">
                            <ng-template kendoMultiSelectItemTemplate let-dataItem>
                                <input type="checkbox" class="k-checkbox" [checked]="isItemSelected(dataItem.Name)">
                                <label class="k-checkbox-label"> dataItem.Name </label>
                            </ng-template>
                    </kendo-multiselect>

组件

public value: any = [ Id: null, Name: "" ];

public isItemSelected(itemText: string): boolean 
    return this.value.some(item => item.Name === itemText);

货币对象

 "Currencies": [
            
                "Id": 7,
                "Name": "AUD"
            ,
            
                "Id": 10,
                "Name": "BND"
            ,
            
                "Id": 19,
                "Name": "BRL"
            ,
            
                "Id": 6,
                "Name": "CAD"
            ,
            
                "Id": 5,
                "Name": "CHF"
            ,
            
                "Id": 13,
                "Name": "CNH"
            ,
            
                "Id": 12,
                "Name": "CNY"
            ,
            
                "Id": 18,
                "Name": "DKK"
            ,
            
                "Id": 3,
                "Name": "EUR"
            ]

Ng模型

分配给 ngModel 的 f.OtherCurrencyName 包含一个以逗号分隔的字符串值 10,19,7。

编辑 1

截图

enter image description here

代码

 <td *ngIf="EditMode[f.LegalFundClassCommercialViewModel.Id] && c == 'Other Currencies'"
                                    class="tableItem">

                                    <!-- f.LegalFundClassCommercialViewModel.OtherCurrencyName -->
                                    <kendo-multiselect [data]="LegalFundClasses.Currencies" style="height: 29.5px;"
                                        [(ngModel)]="f.LegalFundClassCommercialViewModel.OtherCurrencyName"
                                        [textField]="'Name'" [valueField]="'Id'" [autoClose]="false">
                                        <ng-template kendoMultiSelectItemTemplate let-dataItem>
                                            <input type="checkbox" class="k-checkbox"
                                                [checked]="isItemSelected(dataItem.Name)">
                                            <label class="k-checkbox-label"> dataItem.Name </label>
                                        </ng-template>
                                    </kendo-multiselect>

                                </td>




public value: any = [];

public valueChange(value: any): void 
   // this.OtherCurrencyName = value.map(x => x.Id).join();
  

public isItemSelected(itemName: string): boolean 
    return this.value.some(item => item.Name === itemName);
  

其他货币名称

 "LegalFundClassCommercialViewModel": 
                    "Description": "Class A",
                    "AuditSummary": "rmenon Jun 10, 2019",
                    "FeesReviewSummary": "dmukerji May 28, 2019",
                    "TermsReviewSummary": "kweigand Jan 16, 2019",
                    "Id": 13713,
                    "FundId": 237146,
                    "FundClassType": 3,
                    "CurrencyId": 19,
                    "PrimaryCurrencyName": "BRL",
                    "OtherCurrencyName": [
                        10,
                        19,
                        7
                    ]

货币对象

 "Currencies": [
            
                "Id": 7,
                "Name": "AUD"
            ,
            
                "Id": 10,
                "Name": "BND"
            ,
            
                "Id": 19,
                "Name": "BRL"
            ,
            
                "Id": 6,
                "Name": "CAD"
            ]

【问题讨论】：

你能像jsfiddle一样更新你的代码的可调试版本吗？

我已经发布了f.LegalFundClassCommercialViewModel.OtherCurrencyName的内容

我注意到你在做 this.value.some(item => item.Name === itemName);并将值绑定到 ngModel。就我而言，它是 f.LegalFundClassCommercialViewModel.OtherCurrencyName

关于我需要如何让它在我的情况下工作的任何想法。组件中的 Value 属性与 f.LegalFundClassCommercialViewModel.OtherCurrencyName 没有链接

选定值[10,19,7]和选项[name: "AUD", Id: 1, name: "BRL", Id: 2 ]不是相似数组，必须使用相同格式的数组。

【参考方案1】：

我认为你应该使用这段代码：

<div class="example-wrapper">
  <kendo-multiselect
    [data]="listItems"
    [(ngModel)]="value"
    [textField]="'name'"
    [valueField]="'Id'"
    [autoClose]="false"
  >
  <ng-template kendoMultiSelectItemTemplate let-dataItem>
    <input type="checkbox" class="k-checkbox"
      [checked]="isItemSelected(dataItem.name)">
    <label class="k-checkbox-label"> dataItem.name </label>
  </ng-template>
  </kendo-multiselect>
</div>

对于 ts 文件：

class AppComponent 
   public listItems: Array< name: string, Id: number > = [
       name: "AUD", Id: 1 ,
       name: "BRL", Id: 2 ,        
       name: "BND", Id: 3 ,
       name: "DKK", Id: 4 ,
       name: "EUR", Id: 5 
   ];        
   public value: any = [ name: "BRL", Id: 2 ];

   public isItemSelected(itemName: string): boolean 
      return this.value.some(item => item.name === itemName);
   
 

【讨论】：

当我尝试这个时，我可以在已经选择的多选中看到 BRL 项目，但是当我尝试选择其他项目时，复选框项目不会被勾选。我只能看到突出显示的行

这段代码非常好，我已经检查过了，我想你可能有 css 冲突或类似的东西。

我遇到的问题是我的 ngModel 绑定到来自服务器的数组，而不是在组件代码 [(ngModel)]="f.LegalFundClassCommercialViewModel.OtherCurrencyIds" 中硬编码。如何在 isItemSelected 事件中编写逻辑。您使用的 value 属性绑定到 ngModel 并且您已在组件中硬编码其值

那么 f 是什么？

它指的是作为 AllTerms 对象一部分的 LegalFundClassCommercialViewModel。 *ngFor="let f of LegalFundClasses.AllTerms;