В раскрывающемся меню пользовательского интерфейса kendo не отображаются все значения в коллекции

Question

Я реализовал около 6 элементов управления раскрывающимся списком kendo в моем приложении angular 7, которое изначально работало, а теперь внезапно перестало работать.Контрольная разметка выглядит хорошо для меня.Я также вижу коллекцию для раскрывающегося списка значений.Не уверен, почему все значения не привязываются к элементу управления.В элементе управления отображается только значение, соответствующее идентификатору.Элемент управления открывается при выделении и не может видеть остальные значения при проверке элемента.Нужно ли создавать исходный список до того, как данные будут привязаны к элементу управления, а затем снова привязать исходный список к элементу управления, когда пользователь выберет.Также я не вижу никаких ошибок.

Данные для одного раскрывающегося элемента управления (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>

Последнее обновление - я закомментировал все выпадающие спискии просто оставил один на экране.Я вижу выпадающий рендеринг, но за пользовательским интерфейсом.Так что я понимаю, что значения становятся правильно привязанными, но по какой-то причине скрыты в пользовательском интерфейсе

Answer 1

Проблема была решена, так как мой класс CSS был главным виновником.

// z-index: 10050! Важный;