Angular kendo-dropdownlist [textField]

Question

请帮忙。如何在 kendo-dropdownlist 中的 Angular 中添加两个参数到 textField 示例“id”+“text”

<kendo-dropdownlist
                #annualTimetableScheduleDropdown
                [data]="annualSchedules"
                [formControlName]="formNames.annualTimetableScheduleId"
                [defaultItem]="{ id:null, text: 'wybierz Harmonogram RRJ' }"
                [textField]="'text'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                (valueChange)="AnnualTimetableScheduleValueChange($event)"
              >

我尝试

[textField]="'id'" + "'text'"

当我列出下拉列表时，我没有 id。
如何将 id 添加到 Angular + Kendo 下拉列表中文本字段中的文本

Angular 中使用 Kendo 组件 DropDownList 的完整代码 html

<kendo-formfield fxFlex="grow" [orientation]="'horizontal'">
            <kendo-label
              [for]="annualTimetableScheduleDropdown"
              class="k-checkbox-label"
              text="Harmonogram RRJ"
            ></kendo-label>
            <div>
              <kendo-dropdownlist
                [data]="annualSchedules"
                [formControlName]="formNames.annualTimetableScheduleId"
                [defaultItem]="{ id:null, text: 'wybierz Harmonogram RRJ' }"
                [textField]="'text'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                (valueChange)="AnnualTimetableScheduleValueChange($event)"
              >
                <ng-template kendoDropDownListValueTemplate let-dataItem>
                  <span *ngIf="dataItem.id">{{ dataItem.id }}) {{ dataItem.text }}</span>
                  <div>
                    <button
                      (click)="
                        resetDropdownValue(
                          formNames.annualTimetableScheduleId,
                          annualTimetableScheduleDropdown
                        )
                      "
                      class="form__dropdownResetBtn"
                      look="flat"
                      kendoButton
                      icon="close"
                    ></button>
                  </div>
                  <div *ngIf="!dataItem.id">
                    <span>{{ dataItem.id }}) {{ dataItem.text }}</span>
                  </div>
                </ng-template>
              </kendo-dropdownlist>

annualSchedules is Array: string

请帮帮我

我尝试了一切，我学习了 Angular 和剑道，我问你，我可以帮助你

Answer 1

解决方案是使用kendoDropDownListItemTemplate 如图所示https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates/

显示这个：

<div class="example-wrapper">
      <kendo-dropdownlist
        [data]="listItems"
        textField="text"
        valueField="value"
        [value]="selectedValue"
        [valuePrimitive]="true"
      >
        <ng-template kendoDropDownListItemTemplate let-dataItem>
          <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
        </ng-template>
      </kendo-dropdownlist>
    </div>

或者在你的情况下，你会做这样的事情

        <kendo-dropdownlist
            [data]="annualSchedules"
            [formControlName]="formNames.annualTimetableScheduleId"
            [defaultItem]="{ id:null, text: 'wybierz Harmonogram RRJ' }"
            [textField]="'text'"
            [valueField]="'id'"
            [valuePrimitive]="true"
            (valueChange)="AnnualTimetableScheduleValueChange($event)"
         >
            <ng-template kendoDropDownListItemTemplate let-dataItem>
               <ng-container *ngIf="dataItem.id">
                  {{ dataItem.id + ' '+ dataItem.text }}
               </ng-container>
               <ng-container *ngIf="!dataItem.id">
                  {{ ' -  ' + dataItem.text  }} // here I put a dash to indicate there is no id
               </ng-container>
             </ng-template>
        </kendo-dropdownlist>