为什么剑道自动补全显示[object object]

Question

我使用下面的代码来更新我的剑道自动完成。但它在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。有别的办法吗?

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