0

我正在使用下面的代码来更新我的剑道自动完成功能。但它在 UI 中显示 [object Object]。

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

但是，当我使用 setTimeOut 时，它可以工作。

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

由于编码指南，我不能在这里使用 setTimeOut。有替代方法吗？

4

1 回答 1

1

aDirectoryData可能包含一些对象的数组。当它将转换为字符串时，它将是[object Object]. 要显示对象的某些字段，您可以设置valueField属性，如下例所示：

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

如果你想使用一些逻辑，例如显示几个字段的值，你可以为这个项目提供一个模板，如下例所示：

@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"];
}
于 2021-08-12T15:23:29.003 回答