动态创建多个农业网格表答案

【问题标题】：create multiple ag grid table dynamically动态创建多个农业网格表
【发布时间】：2021-07-17 09:35:09
【问题描述】：

需要动态创建多个ag网格表。但我面临以下问题

     Error occurs in the template of component AppComponent.
src/app/app.component.html:3:18 - error NG5002: Parser Error: Unexpected token '}' at column 22 in [{{response.columndef}}] in D:/angular/ag-custom/src/app/app.component.html@2:17

3     [columnDefs]={{response.columndef}}>

app.component.html

 <div *ngFor="let response of data.response">
  <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= {{ response.rowData }}
    [columnDefs]= {{ response.columndef }}>
  </ag-grid-angular>
</div>

app.component.ts

import { Component } from '@angular/core';
import { GridRes } from './gridres.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ag-custom';


data: GridRes={"response":[{"label":"Table1","columndef":[{"header":"Make","field":"make","sortable":true,"filter":true,"resizable":true},{"header":"Model","field":"model","sortable":true,"filter":true,"resizable":true},{"header":"Price","field":"price","sortable":true,"filter":true,"resizable":true}],"rowData":[{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000}]},{"label":"Table2","columndef":[{"header":"Make","field":"make","sortable":true,"filter":true,"resizable":true},{"header":"Model","field":"model","sortable":true,"filter":true,"resizable":true},{"header":"Price","field":"price","sortable":true,"filter":true,"resizable":true}],"rowData":[{"make":"Toyota","model":"Celica","price":35000},{"make":"Ford","model":"Mondeo","price":32000},{"make":"Porsche","model":"Boxter","price":72000}]}]};

}

GridRes 模型

export class GridRes {
    response: Response[];
}
export class Response {
    label: string;
    columndef: Columndef[];
    rowData: RowData[];
}
export class Columndef {
    header: string;
    field: string;
    sortable: boolean;
    filter: boolean;
    resizable: boolean;
}

export class RowData {
    make: string;
    model: string;
    price: number;
}

如何根据 json 数据创建多个表

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

绑定应该写成[columnDefs]="response.columndef"，而不是你所做的（字符串插值）-[columnDefs]= {{ response.columndef }}（对所有输入进行更改，而不仅仅是columDefs）

所以你的模板应该是这样的：

<div *ngFor="let response of data.response">
  <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]="response.rowData"
    [columnDefs]='response.columndef">
  </ag-grid-angular>
</div>

【讨论】：