Angular中dx-data-grid组件dataSource绑定失败的技术求助

Let's break down the issues causing this error and fix them step by step:

1. Missing DevExtreme Grid Module in Your Feature Module #

The DxDataGridModule is only imported in your AppComponent's module, but your ListAddressTypeComponent is likely part of a separate feature module (or isn't declared in the same module that imports DxDataGridModule). Angular requires that any component you use in a template must be imported or declared in the same module as the component using it.

Fix: #

Create a dedicated module for your address type feature (or update your existing feature module) to import DxDataGridModule. For example, if you have an AddressTypeModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DxDataGridModule } from 'devextreme-angular';
import { ListAddressTypeComponent } from './adresstype.component';

@NgModule({
  imports: [
    CommonModule,
    DxDataGridModule // Add this line to make the grid component available
  ],
  declarations: [ListAddressTypeComponent]
})
export class AddressTypeModule { }

Then make sure this module is imported into your root AppModule.

If you're not using feature modules, fix your root module setup (note: your current code attaches @NgModule directly to AppComponent, which is incorrect—modules should be separate classes):

// app.module.ts (separate dedicated file)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DxDataGridModule } from 'devextreme-angular';
import { AppComponent } from './app.component';
import { ListAddressTypeComponent } from './path-to/adresstype.component';

@NgModule({
  imports: [BrowserModule, DxDataGridModule],
  declarations: [AppComponent, ListAddressTypeComponent], // Declare your grid component here
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Mismatched Variable Name in Template #

In your template, you're binding to dtAddressType, but in your ListAddressTypeComponent, you're storing the fetched data in addressTypes (or data). There's no dtAddressType property defined in your component, which will cause an additional error once the module issue is fixed.

Fix: #

Update your template to use the correct variable name that exists in your component:

<dx-data-grid #grid id="tableAddressType" class="table m-b-0 toggle-arrow-tiny color-table info-table" [dataSource]="addressTypes">
</dx-data-grid>

Or, if you intended to use dtAddressType specifically, add that property to your component and assign the data to it:

export class ListAddressTypeComponent implements OnInit {
  public addressTypes: AddressType[];
  public dtAddressType: AddressType[]; // Add this property

  constructor(public addressTypeService: AddressTypeService) { }

  ngOnInit(): void {
    this.addressTypeService.GetAdressTypes()
      .subscribe(addressTypes => {
        this.addressTypes = addressTypes;
        this.dtAddressType = addressTypes; // Assign data to the matching variable
      }, (error) => {
        console.error('Failed to load address types:', error);
        this.errors = error;
      });
  }
}

3. Verify Service Data Flow #

Double-check that your AddressTypeService.GetAdressTypes() is actually returning valid data. Add a console log to confirm the data is being fetched correctly:

ngOnInit(): void {
  this.addressTypeService.GetAdressTypes()
    .subscribe(addressTypes => {
      console.log('Fetched address types:', addressTypes); // Verify data exists here
      this.addressTypes = addressTypes;
    }, error => {
      console.error('Error fetching data:', error); // Log errors to debug service issues
      this.errors = error;
    });
}

These steps should resolve the template parse error and get your DevExtreme grid working with the data source.

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