动态创建多个 ag 网格 table

create multiple ag grid table dynamically

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

     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 数据创建多个 tables

绑定应该写成 [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>