Question

这次我正在使用Angular，当我尝试创建表时出现此错误：

错误响应：错误：未捕获（按承诺）：错误：模板解析   错误：无法绑定到“ dataSource”，因为它不是“ dx-data-grid”的已知属性。



如果“ dx-data-grid”是Angular组件，并且具有“ dataSource”输入，则请验证它是否属于此模块。



如果'dx-data-grid'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@ NgModule.schemas'   禁止显示此消息。



要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。



（“” AddressType“ class =” table m-b-0 toggle-arrow-tiny color-table info-table“ [错误->] [dataSource]="dtAddressType"> </dx-data-grid>”）

这是我的AdressType.component.html和AdressType.component.ts

import { Component, OnInit, ViewContainerRef, NgModule } from '@angular/core';
import { AdressType } from '../models/adresstype';
import { AddressTypeService } from '../adresstype.service';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...']
})

export class ListAddressTypeComponent implements OnInit {
  public addressTypes: AddressType[];
  
  constructor(
    public addressTypeService: AddressTypeService) {
    ... // Other things
  }

  ngOnInit(): void {
    this.addressTypeService.GetAdressTypes()
    .subscribe(addressTypes => {
      this.addressTypes = addressTypes
      this.data = addressTypes
    },
      () => this.errors);
  }
  
  ... // Other things
}

<div class="row">
    <div class="card col-12">
        <div class="card">
            <div class="card-block" style="display: inline;">
                <br />
                <div class="table-responsive">
                    <dx-data-grid #grid id="tableAddressType" class="table m-b-0 toggle-arrow-tiny color-table info-table"
                        [dataSource]="dtAddressType">
                        
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>
</div>

还有我的app.component.ts

import { DxDataGridModule } from 'devextreme-angular';
import { BrowserModule } from '@angular/platform-browser';
import { Component,NgModule } from '@angular/core';
import config from "devextreme/core/config";
import { loadMessages, locale } from "devextreme/localization";
import 'devextreme-intl';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
@NgModule({
  imports: [
      BrowserModule,
      DxDataGridModule
  ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppComponent {
  title = 'app';
  locale: string;
  constructor() {
    config({ defaultCurrency: "BRL" });
  }
}

我看到此链接https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/Angular/Light/

Answer 1

在此处引用app.component.ts

对于自定义数据源，您需要在component.ts中公开它 https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomDataSource/Angular/Light/

export class AppComponent { dataSource: any = {}; .... 那么您可能需要将其与[]一起使用喜欢 [dataSource]="dataSource

无法绑定到“ dataSource”-Angular

1 个答案: