我必须在一个网格中显示数据，该网格需要在一列中显示整个数组。
为清楚起见，请考虑以下数据结构作为最小示例：
export class Person {
public Name: string;
public Nicknames: string[];
public Skills: Skill[];
constructor(name: string, nicknames: string[], skills: Skill[]) {
this.Name = name;
this.Nicknames = nicknames;
this.Skills = skills;
}
}
export class Skill {
public Id: number;
public Description: string;
constructor(id: number, description: string) {
this.Id = id;
this.Description = description;
}
}
人员可以具有多种技能，其中技能是复杂的数据结构（与昵称（只是字符串）相反）。
我们用两个人定义一个数据源：
// define skills
const angular = new Skill(1, 'Angular');
const js = new Skill(2, 'Javascript');
// define persons having these skills
const alice = new Person('John', ['Johnny'], [angular, js]);
const bob = new Person('Robert', ['Bob', 'Rob'], [angular]);
// set gridData
this.gridData = [alice, bob];
我想在网格上显示人员。对于技能，我只想显示说明，而不是ID。结果应如下所示：
Name Nicknames Skills
John Johnny Angular, Javascript
Robert Bob, Rob Angular
我考虑使用* ngFor，但这会导致错误：“找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables，例如数组。”好像dataItem不再是数组。
<kendo-grid [data]="gridData" [columnMenu]="false">
<kendo-grid-column field="Name" title="Name"></kendo-grid-column>
<!--No problems with a simple string array-->
<kendo-grid-column field="Nicknames" title="Nicknames"></kendo-grid-column>
<!--Using ngFor result in error-->
<kendo-grid-column field="Skills" title="Skills with ngFor">
<ng-template kendoGridCellTemplate let-dataItem>
<div *ngFor="let skill of dataItem">{{skill.Description}}</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>
有趣的是，如果我不使用模板，则会为每个技能得到一个[object Object] 。但是，如果我使用模板并显示{{dataItem}}，则会导致单个 [object Object]。
<!--Not using a template results in [object Object] per skill-->
<kendo-grid-column field="Skills" title="Skills w/o template"></kendo-grid-column>
<!--dataItem seems to be a SINGLE [object Object]-->
<kendo-grid-column field="Skills" title="Skills dataItem">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem}}
</ng-template>
</kendo-grid-column>
您知道如何显示数组并向其应用一些模板代码（例如仅显示说明）吗？
平整数据并将其存储在平面数据源中（就像大多数示例一样）不是一种选择，因为我从后端接收数据，并且还需要将数据发布回API。使用我更复杂的真实数据时，这将导致大量转换。
答案 0 :(得分：0)
使用cell template，我可以获得所需的输出，请检查以下代码段。
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductName">
</kendo-grid-column>
<kendo-grid-column field="Discontinued">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<span
class="{{dataItem.Discontinued ? 'discontinued' : 'active'}}">
{{dataItem.Discontinued ? "discontinued" : "active"}}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="MoreData">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<span *ngFor="let item of dataItem.MoreData;let i = index">
{{item.Description}}
<label *ngIf="(dataItem.MoreData.length-1)>i">,</label>
</span>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = sampleProducts;
}
export class MoreData {
public Id: number;
public Description: string;
constructor(id: number, description: string) {
this.Id = id;
this.Description = description;
}
}
const moreData1 = new MoreData(1, 'Data 1');
const moreData2 = new MoreData(2, 'Data 2');
const moreData3 = new MoreData(3, 'Data 3');
const moreData4 = new MoreData(4, 'Data 4');
const moreData5 = new MoreData(5, 'Data 5');
export const sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20),
"MoreData": [moreData1,moreData2,moreData3,moreData4]
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12),
"MoreData": [moreData2,moreData3]
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26),
"MoreData": [moreData1,moreData2]
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19),
"MoreData": [moreData3,moreData4]
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17),
"MoreData": [moreData5]
}
];