kendo UI 下拉控件未显示集合中的所有值

Question

我在我的 Angular 7 应用程序中实现了大约 6 个剑道下拉控件，这些控件最初可以工作，现在突然停止工作。控制标记对我来说看起来不错。我还可以看到包含值的下拉列表的集合。不知道为什么我所有的值都没有绑定到控件。只有与 ID 匹配的值才会显示在控件中。控件确实在选择时打开，并且在检查元素时看不到其余的值。我是否需要在数据绑定到控件之前创建一个原始列表，然后在用户选择时将原始列表重新绑定回控件。我也看不到任何错误。

下拉控件之一的数据 (FundDetails.InvestmentStatuses)

[{
    "RANK_ORDER":20,
    "NAME":"Illiquid",
    "IS_ACTIVE":true,
    "SORT_ORDER":20,
    "ID":134,
    "DATE_CREATED":"2018-06-13T09:07:09",
    "LAST_MODIFIED":"2018-06-13T09:07:09",
    "CREATED_BY_ID":96,
    "LAST_MODIFIED_BY_ID":96
}, {
    "RANK_ORDER":1,
    "NAME":"Invested",
    "IS_ACTIVE":true,
    "SORT_ORDER":1,
    "ID":1,
    "DATE_CREATED":"2014-02-04T12:50:20",
    "LAST_MODIFIED":"2014-10-23T22:56:37",
    "CREATED_BY_ID":52,
    "LAST_MODIFIED_BY_ID":338
}, {
    "RANK_ORDER":9,
    "NAME":"Not Evaluated",
    "IS_ACTIVE":true,
    "SORT_ORDER":4,
    "ID":9,
    "DATE_CREATED":"2014-02-12T10:10:39",
    "LAST_MODIFIED":"2018-08-22T10:49:48",
    "CREATED_BY_ID":52,
    "LAST_MODIFIED_BY_ID":96
}, {
    "RANK_ORDER":4,
    "NAME":"Prospective",
    "IS_ACTIVE":true,
    "SORT_ORDER":3,
    "ID":6,
    "DATE_CREATED":"2014-02-04T12:50:20",
    "LAST_MODIFIED":"2018-08-22T10:49:50",
    "CREATED_BY_ID":52,
    "LAST_MODIFIED_BY_ID":96
}, {
    "RANK_ORDER":8,
    "NAME":"Prospective - Inactive",
    "IS_ACTIVE":true,
    "SORT_ORDER":7,
    "ID":8,
    "DATE_CREATED":"2014-02-04T12:50:20",
    "LAST_MODIFIED":"2018-08-22T10:49:50",
    "CREATED_BY_ID":52,
    "LAST_MODIFIED_BY_ID":96
}, {
    "RANK_ORDER":7,
    "NAME":"Redeemed",
    "IS_ACTIVE":true,
    "SORT_ORDER":11,
    "ID":106,
    "DATE_CREATED":"2014-09-09T18:51:12",
    "LAST_MODIFIED":"2014-10-23T22:56:38",
    "CREATED_BY_ID":338,
    "LAST_MODIFIED_BY_ID":338
}, {
    "RANK_ORDER":2,
    "NAME":"Redeeming",
    "IS_ACTIVE":true,
    "SORT_ORDER":5,
    "ID":4,
    "DATE_CREATED":"2014-02-04T12:50:20",
    "LAST_MODIFIED":"2014-10-23T22:56:37",
    "CREATED_BY_ID":52,
    "LAST_MODIFIED_BY_ID":338
}]

标记

      <label for="inputOffice" class="col-md-2 col-form-label ">Investment Status</label>
      <div class="col-md-4">
        <div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
           <kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId"
                        class="form-control form-control-sm" [data]="FundDetails.InvestmentStatuses"
                        [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
          </kendo-dropdownlist>
       </div>
     </div>

组件代码

getFundDetails(selectedFundId: number) {
        // Initialize fundid to 0 to test new fund
        // selectedFundId = 0;

        if (selectedFundId != null) {
            this.fundService.getFundDetails(selectedFundId).subscribe((data: IFund[]) => {
                // data.forEach((d) => {d.InceptionDate = new Date(d.InceptionDate); });
                this.FundDetails = data;
                this.OriginalFundStrategiesList = this.FundDetails.FundStrategies;
                this.SelectedFundId = this.FundDetails.FundId;

                // if ( this.SelectedFundId === 0) {
                //     this.resetForm();
                // }
            });
        }
    }

界面

export interface IFund {
    FundId: number;
    FundName: string;
    IsAnonymous: boolean;
    BloombergTicker: string;
    InvestmentStatusId: number;
    InvestmentStatusName: string;
    FlagShipFundId: number;
    InceptionDate: Date;
    AccountMandateId: number;
    AccountMandateName: string;
    VehicleTypeId: number;
    VehicleTypeName: string;
    PrimaryClassId: number;
    PrimaryClassDescripton: string;
}

我什至尝试过使用剑道下拉菜单的原生属性，但没有成功

 <kendo-dropdownlist  k-ng-model="FundDetails.VehicleTypeId"
                    k-data-text-field="'NAME'"
                    k-value-primitive="true"                
                    k-data-value-field="ID"
                    k-data-source="FundDetails.VehicleTypes">

                </kendo-dropdownlist>

最新的更新是，我注释掉了所有下拉框，只在屏幕上留下了一个。我可以看到下拉渲染，但它在 UI 后面。所以我的理解是值被正确绑定但由于某种原因隐藏在 UI 中

Answer 1

问题已经解决，因为我的 css 类是罪魁祸首。

//z-index: 10050 !important;