Why kendo autocomplete shows [object Object]

Question

I am using below code to update my kendo autocomplete. but it shows [object Object] in UI.

<ng-template kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
    <kendo-autocomplete #dropDownList [data]="aDirectoryData" [clearButton]="true"
                        [(ngModel)]="addressDisplayValue[rowIndex]" [disabled]="dataItem.isErroredItem" [allowCustom]="true"
                        (keyup)="fShippingAddressAutoComplete($event)" 
                        (valueChange)="onValue($event, rowIndex, dataItem)" [value]="[(ngModel)]="addressDisplayValue[rowIndex]"
                        (click)="fShippingAddress(dropDownValue.value)" (focus)="dropDownList.toggle()">
    </kendo-autocomplete>
</ng-template>

    addressDisplayValue: string[] = [];
    onValue(shippingAdd: IShipToAddresses, rowIndex: number, dataItem: ISalesOrderGroups): void {  
   
      this.addressDisplayValue[rowIndex] = '';
      
      const shippingId = 'abcd'
     
        this.addressDisplayValue[rowIndex] = (shippingId + ' ' +
        'defgh');
     }

However when I use setTimeOut , it works.

setTimeout(() => {
    this.addressDisplayValue[rowIndex] = (shippingId + ' ' + 'defgh');
});

I cannot use setTimeOut here due to coding guidelines. Is there an alternate way?

Answer 1

aDirectoryData probably contains array of some objects. When it would be converted to string it would be [object Object]. To show some field of an object you can set the valueField property as in this example:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <kendo-autocomplete
      [data]="listItems"
      [valueField]="'text'"
      [placeholder]="'e.g. Andorra'"
    >
    </kendo-autocomplete>
  `,
})
export class AppComponent {
  public listItems: Array<{ text: string; value: string }> = [
    { text: "Albania", value: "Alb" },
    { text: "Andorra", value: "And" },
    { text: "Armenia", value: "Arm" },
    { text: "Austria", value: "Aus" },
    { text: "Azerbaijan", value: "Aze" },
  ];
}

If you want to use some logic, eg show values of several fields, you can provide a template for the item as in this example:

@Component({
  selector: "my-app",
  template: `
    <div class="example-wrapper">
      <kendo-autocomplete [data]="listItems">
        <ng-template kendoAutoCompleteItemTemplate let-dataItem>
          <span style="color: #00F;">{{ dataItem }}</span>
        </ng-template>
      </kendo-autocomplete>
    </div>
  `,
})
export class AppComponent {
  public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];
}