Angular 5中如何动态绑定Kendo Grid并生成动态列

No problem! Let's break down how to set up dynamic columns in Kendo Grid for Angular 5—this is super common when dealing with variable column sets from an API. Here's a step-by-step approach that fits your scenario:

1. Define TypeScript Interfaces (Optional but Recommended) #

First, create interfaces to type your column configs and row data. This helps with TypeScript's type checking and makes your code cleaner:

// Interface for column configuration (matches your API's Field/Title structure)
interface GridColumn {
  Field: string;
  Title: string;
  // Add extra properties like width, format, or sortable if needed
}

// Flexible interface for row data (handles dynamic keys)
interface RowData {
  [key: string]: any;
}

2. Fetch Data from Your WebAPI #

In your component, use Angular's HttpClient to pull the data from your API. There are two common scenarios based on how your API returns data:

Scenario A: API returns explicit column config + row data #

If your API sends a response with both column definitions and row data:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dynamic-grid',
  templateUrl: './dynamic-grid.component.html'
})
export class DynamicGridComponent implements OnInit {
  public columns: GridColumn[] = [];
  public gridData: RowData[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Replace with your actual API endpoint
    this.http.get<any>('your-webapi-endpoint').subscribe(response => {
      this.columns = response.columnConfig; // Array of { Field: '...', Title: '...' }
      this.gridData = response.rowData; // Array of objects with dynamic values
    });
  }
}

Scenario B: API returns only row data (extract columns from data keys) #

If your API only sends the row data array, you can auto-generate columns from the first row's keys:

ngOnInit(): void {
  this.http.get<RowData[]>('your-webapi-endpoint').subscribe(data => {
    this.gridData = data;
    // Extract column names from the first row's keys and format titles
    if (data.length > 0) {
      this.columns = Object.keys(data[0]).map(key => ({
        Field: key,
        Title: key.charAt(0).toUpperCase() + key.slice(1) // Capitalize first letter for titles
      }));
    }
  });
}

3. Bind Dynamic Columns in the Template #

Now, use *ngFor to loop over your columns array and generate kendo-grid-column elements dynamically. You can even mix in fixed columns if needed:

<kendo-grid [data]="gridData">
  <!-- Dynamic columns generated from API -->
  <kendo-grid-column 
    *ngFor="let col of columns"
    [field]="col.Field"
    [title]="col.Title"
    <!-- Optional: add properties like [width] or [sortable] here -->
  ></kendo-grid-column>

  <!-- Optional fixed column example -->
  <kendo-grid-column field="action" title="Actions" width="120">
    <ng-template kendoGridCellTemplate>
      <button>Edit</button>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

4. Add Custom Column Behavior (Optional) #

If you need to customize columns (like formatting dates/currency or adding templates), extend your GridColumn interface and handle it in the template:

// Updated interface with format support
interface GridColumn {
  Field: string;
  Title: string;
  Format?: string; // e.g., 'shortDate' for dates, 'currency' for numbers
}

Then in the template:

<kendo-grid-column 
  *ngFor="let col of columns"
  [field]="col.Field"
  [title]="col.Title"
>
  <ng-template kendoGridCellTemplate let-dataItem>
    <!-- Apply formatting based on column config -->
    <span *ngIf="col.Format === 'shortDate'">{{ dataItem[col.Field] | date:'shortDate' }}</span>
    <span *ngIf="col.Format === 'currency'">{{ dataItem[col.Field] | currency }}</span>
    <span *ngIf="!col.Format">{{ dataItem[col.Field] }}</span>
  </ng-template>
</kendo-grid-column>

Quick Setup Checks for Angular 5 #

• Make sure you've imported HttpClientModule in your AppModule (Angular 5 uses HttpClient instead of the old Http service).
• Verify you've installed and imported GridModule from @progress/kendo-angular-grid in your feature module.

内容的提问来源于stack exchange，提问作者shambhu yadav