我有一个http://10.24.1.2/data.json:3版本的Angular项目，我正在尝试实现Angular CLI: 6.1.1，我安装了所有必要的模块，并且工作，但是当我尝试访问网格的组件时，我遇到了问题设置一些值。我正在尝试使用syncfusion grids这样访问网格的组件（我正在使用此网格的组件）：```从'@ angular / core'导入{Component，OnInit，ViewChild};
viewchild但不幸的是，此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 {
}
，为什么它没有定义？我想念什么吗？
答案 0 :(得分：0)
您可能会错过将引用（#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;
}
}