Question

我正在尝试填充剑道多选控件。数据确实绑定到控件，并且我可以看到currency对象中的所有货币，但它会显示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"
            }]

NgModel

被赋给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);
  }

OtherCurrencyName

 "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"
            }]

Answer 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);
   }
 }

Kendo Multiselect不显示先前选择的项目

1 个答案: