angular - 如何在 Angular 中获取 Syncfusion 网格的组件
问题描述
我有带有Angular CLI: 6.1.1
版本的角度项目,我正在尝试实现syncfusion grids
我安装了所有必要的模块并且它可以工作,但是当我尝试访问网格的组件以获取和设置一些值时我遇到了问题。我正在尝试使用viewchild
这样的方式访问网格的组件(我正在使用此网格的组件):```import {Component, OnInit, ViewChild} from '@angular/core';
import {ProjectsService} from '../_services/projects.service';
import {AlertService} from '../_services/alert.service';
import {first} from 'rxjs/operators';
import {GridComponent} from '@syncfusion/ej2-angular-grids';
@Component({
selector: 'app-client-satisfaction',
templateUrl: './client-satisfaction.component.html',
styleUrls: ['./client-satisfaction.component.css'],
})
export class ClientSatisfactionComponent implements OnInit {
@ViewChild('grid', {static: false}) public Grid: GridComponent;
constructor(private projectsService: ProjectsService, private alertService: AlertService) {
}
ngOnInit() {
}
但不幸的是,这个Grid
变量总是undefined
这是我的app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {AlertComponent} from './alert/alert.component';
import {ChartsModule} from 'ng2-charts';
import {DatePipe} from '@angular/common';
import {NgxPaginationModule} from 'ngx-pagination';
import {NgMaterialMultilevelMenuModule} from 'ng-material-multilevel-menu';
import {FormsModule} from '@angular/forms';
import {GridModule} from '@syncfusion/ej2-angular-grids';
import {EditService, ToolbarService, PageService} from '@syncfusion/ej2-angular-grids';
import '../polyfills';
import {
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule,
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {WbsInfoComponent} from './wbs-info/wbs-info.component';
import {WbsInfoScheduleComponent} from './wbs-info-schedule/wbs-info-schedule.component';
import {BudgetsComponent} from './budgets/budgets.component';
import {SchedulesComponent} from './schedules/schedules.component';
import {RisksComponent} from './risks/risks.component';
import {ClientSatisfactionComponent} from './client-satisfaction/client-satisfaction.component';
@NgModule({
exports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatTreeModule
]
})
export class MaterialModule {
}
@NgModule({
declarations: [
ClientSatisfactionComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
ChartsModule,
NgxPaginationModule,
NgMaterialMultilevelMenuModule,
BrowserAnimationsModule,
MatNativeDateModule,
MaterialModule,
BrowserAnimationsModule,
MatIconModule,
GridModule
],
providers: [ToolbarService, EditService, PageService],
bootstrap: [AppComponent]
})
export class AppModule {
}
我想不通,为什么我不能得到GridComponent
,为什么它没有定义?我错过了什么吗?
解决方案
您可能会错过将引用(#grid)添加到 Grid 组件。请参考以下代码。
HTML
<ejs-grid #grid [dataSource]='data' height='350'>
<e-columns>
. . .
</e-columns>
</ejs-grid>
TS
export class AppComponent {
public data: Object[] = [];
@ViewChild('grid', {static: false}) public Grid: GridComponent;
ngOnInit(): void {
this.data = orderDetails;
}
}
推荐阅读
- javascript - 使用 promise 模块连接 mongodb 时出错
- google-apps-script - 使用 Google Apps 脚本为 Google Docs 中表格单元格的第一行设置样式
- java - 尽管在 spring-boot-maven-plugin 中配置了排除,但日志依赖项仍包含在 lib 文件夹中
- oracle - Oracle 数据库 12c“压缩查询”选项
- ios - 在 iOS 的启动屏幕上显示两张图片
- objective-c - DTCoreText 没有这样的文件或目录 libDTCoreText.a
- java - 如何接收请求正文数据以及多部分图像文件?
- c# - 如何将不同面板中存在的单选按钮分组为一个组?
- php - 在 nginx 上部署 PHP 和 react js 应用
- json - Google Apps 脚本 - 如何将 JSON 数据流式传输到 BigQuery?