Как получить компонент сетки Syncfusion в Angular

У меня есть проект angular с версией 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 и почему не определяется? Я что-то упускаю?


typescript angular syncfusion
person Gog1nA    schedule 26.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете пропустить добавление ссылки (#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;
}
}

Образец

person Pavi    schedule 31.12.2019