Не удается прочитать свойство 'setRowData' из неопределенного / проблема с шаблоном HTML? - PullRequest
Новая
       27

Не удается прочитать свойство 'setRowData' из неопределенного / проблема с шаблоном HTML?

0 голосов
/ 21 октября 2019

Поддерживаю шаблон многократного использования AG-GRID со всеми необходимыми методами (параметры clear filer / CSV download / Autofit..etc) --- Базовый шаблон. У меня есть другой шаблон AG-Grid, который использует «Базовый шаблон» (через внедрение зависимостей) и заполняет сетку строкой данных на основе значения searchString . (Пример файла ниже) 

import { Component, OnInit, } from '@angular/core';
import { GridOptions, GridApi, } from "ag-grid-community";
import { ReportersgridComponent } from '../../commonpages/reportersgrid/reportersgrid.component'

@Component({
    selector: 'app-reporters',
    templateUrl: './reporters.component.html',
    styleUrls: ['./reporters.component.scss']
})
export class ReportersComponent implements OnInit {

    private reporterGrid: GridOptions;
    constructor(public reportersGrid: ReportersgridComponent, ) {
        this.reporterGrid = <GridOptions>{};
        this.reporterGrid.enableSorting = true;
        this.reporterGrid.enableFilter = true;
        this.reporterGrid.enableColResize = true;
        this.reporterGrid.columnDefs = this.reportersGrid.createColumnDefs();
        this.reporterGrid.rowData = this.reportersGrid.createRowData();
    }
    ngOnInit() {
    }
    //Search Function 
    performSearch() {
        let searchString = "";
        this.populateFiteredReporter(searchString);
        // this.reporterGrid.api.setRowData(reporterGrid.rowData)
    }
    populateFiteredReporter(searchString) {
        this.reporterGrid.rowData = [
            { fullName: 'fName,mName,lName2', address: "address2", country: "country2", postcode: "postcode2", phone: "phone", email: "email", qualification: "MBBS", institution: "institution", department: "department" },
        ];
        var str = JSON.stringify(this.reporterGrid.rowData);
        console.log('data:' + str);
        this.reporterGrid.api.setRowData(this.reporterGrid.rowData);

        //this.reportersGrid.populateFiteredReporter(searchString);
    }
}

В HTML вышеупомянутого файла я использую «Базовый шаблон» s SELECTOR AS HTML TAG. (

<app-reportersgrid></app-reportersgrid>

) для отображения части сетки.

Выше выдает ошибку -> Невозможно прочитать свойство 'setRowData' из неопределенного .

Обратите внимание, что если я заменю селектор базового шаблона на базовыйПолная часть HTML шаблона для ag-grid (которая имеет (gridReady) = "onGridReady ($ event)"), страница работает нормально.

Могу ли я получить помощь, чтобы вернуться к моей первоначальной идее о сохранении базового шаблона в целости и сохранности? ? (Обратите внимание, что все функции базового шаблона, такие как экспорт в csv, автозаполнение и т. Д., Работают нормально - они кодируются в базовом шаблоне вместе с OnGridReadty ().)

Заранее спасибо .. ASJ.

22/10/2019 / * Шаблон reporters.component.html * / 

<div>
  <div class="col-md-12">
    <div class="card">
      <div class="card-header text-uppercase  font-weight-bold">
        Search
      </div>
      <div class="card-body">
        <div>
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <span>Name <i>(First/Middle/Last)</i></span>
                <input type="text" class="form-control" [(ngModel)]="reporterName">
              </div>
            </div>

          </div>    
        </div>
      </div>   
      <div class="card-footer">
        <div class="row">        
          <div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
            <button type="button" class="btn btn-normal btn-primary" (click)="performSearch()" style="width: 100px; ">Search</button>

            <button type="button" class="btn btn-normal btn-light" style="width: 100px;">Reset</button>
          </div>


        </div>

      </div>
    </div>
  </div>
 <app-reportersgrid></app-reportersgrid>

</div>

Базовый шаблон - HTML-код AG-GRID 

 <div class="centered-content">

  <div>

    <ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham"
      [gridOptions]="reporterGrid" [enableSorting]="true" enableFilter [sideBar]="sideBar"
      enableColResize [pagination]="true" [paginationPageSize]=10             
       rowDragManaged=true
      (gridReady)="onGridReady($event)">
      <ag-grid-column headerName="Name" field="fullName"></ag-grid-column>
      <ag-grid-column headerName="Address" field="address" [width]="150"></ag-grid-column>
      <ag-grid-column headerName="Country" field="country"></ag-grid-column>
      <ag-grid-column headerName="Postcode" field="postCode"></ag-grid-column>
      <ag-grid-column headerName="Phone" field="phone"></ag-grid-column>
      <ag-grid-column headerName="Email" field="email"></ag-grid-column>
      <ag-grid-column headerName="Qualification" field="qualification"></ag-grid-column>
      <ag-grid-column headerName="Institution" field="institution"></ag-grid-column>             
      <ag-grid-column headerName="Department" field="department" [cellRenderer]="countryCellRenderer">
      </ag-grid-column>
    </ag-grid-angular>

  </div>

</div>

/ ReportersGridcomponent.ts file / 

import { Component, OnInit } from '@angular/core';
//import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {GridOptions, GridApi, Grid} from "ag-grid-community";

@Component({
  selector: 'app-reportersgrid',
  templateUrl: './reportersgrid.component.html',
  styleUrls: ['./reportersgrid.component.scss']
})
export class ReportersgridComponent implements OnInit {
  private reporterGrid: GridOptions;
  private gridApi:GridApi;
  private gridColumnApi;
  filterName: string | null;

  constructor( ) {
    this.reporterGrid = <GridOptions>{};
    this.reporterGrid.enableSorting = true;
    this.reporterGrid.enableFilter = true;
    this.reporterGrid.enableColResize = true;
    this.reporterGrid.columnDefs = this.createColumnDefs();
    this.reporterGrid.rowData = this.createRowData(); 
     }
  ngOnInit() {
  }
  createColumnDefs() {
    this.reporterGrid.columnDefs = [
     {
      headerName: "Name",
      field: "fullName", 
      width:100,      
  },
  {
    headerName: "Address",
    field: "address",
},

{
    headerName: "Country",
    field: "country",

},
{
  headerName: "Postcode",
  field: "postCode",
},
{
    headerName: "Phone",
    field: "phone",
},

{
    headerName: "Email",
    field: "email",
},
{
  headerName: "Qualification",
  field: "qualification",
},
{
    headerName: "Institution",
    field: "institution",
},
{
    headerName: "Department",
    field: "department",
}

  ];
return this.reporterGrid.columnDefs
  }
  createRowData(){
    this.reporterGrid.rowData = [
      //    {fullName: 'fName,mName,lName',address:"address1",country: "country",postcode: "postcode",phone: "phone",email:"email",qualification:"MBBS",institution:"institution",department:"department"},  
    ];
  return this.reporterGrid.rowData;
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.autoSizeAll()
  }
  autoSizeAll() {
    var allColumnIds = [];
    this.gridColumnApi.getAllColumns().forEach(function(column) {
    allColumnIds.push(column.colId);
  });
    this.gridColumnApi.autoSizeColumns(allColumnIds);

}

onCSVExport() {

  this.reporterGrid.api.exportDataAsCsv();
 } 
 onSearchTextChange(newData: string) {
   this.reporterGrid.api.setQuickFilter(newData);
 }
 clearFilters() {
 if (this.gridApi.isQuickFilterPresent())
 {
   this.gridApi.setQuickFilter('');
   this.filterName="";
 }
 }

//  populateFiteredReporter(searchString){

//     this.reporterGrid.rowData = [
//       {fullName: 'fName,mName,lName2',address:"address2",country: "country2",postcode: "postcode2",phone: "phone",email:"email",qualification:"MBBS",institution:"institution",department:"department"},  
//   ];
//   var str= JSON.stringify(this.reporterGrid.rowData);
//   console.log('data:'+str);  
//   this.reporterGrid.api.setRowData(this.reporterGrid.rowData);
//   //return this.reporterGrid.rowData;
//   }
 }

1 Ответ

0 голосов
/ 22 октября 2019

Первое, что вам нужно сделать, это настроить компонент сетки так, чтобы он принимал параметры сетки от своего родителя: 

@Input() public reporterGrid: GridOptions;

Вот сокращенная версия того, как должен выглядеть ваш компонент сетки. Я предлагаю использовать свойства или поля вместо использования методов для создания ваших строк и столбцов. Просто предложение. 

export class ReportersgridComponent implements OnInit {
    @Input() public reporterGrid: GridOptions;
    private columnDefs = [
        // put your column def json here
    ];

    private rowDefs = [
        // Put your row def json here
    ];

    constructor() {
    }

    ngOnInit() {
        this.reporterGrid.columnDefs = this.columnDefs;
        this.reporterGrid.rowData = this.rowDefs;
    }

    // rest of your file
}

И файл ts вашего компонента репортеров должен выглядеть следующим образом: 

export class ReportersComponent implements OnInit {

    private reporterGridOptions: GridOptions;

    constructor() {
        this.reporterGridOptions = {
            enableSorting: true,
            enableFilter: true,
            enableColResize: true,
        };
    }

    ngOnInit() {
    }
 // other code...
}

В html вашего компонента репортера вам нужно передать это значение через элемент, подобныйэто: 

<app-reportersgrid [reporterGrid]="reporterGridOptions"></app-reportersgrid>

Еще одно предложение, я бы потратил некоторое время на то, чтобы правильно назвать вещи, настроить регистр и отформатировать ваш код, чтобы его было легче читать. Я надеюсь, что это поможет вам двигаться в правильном направлении. По сути, вы хотите передать свой объект параметров компоненту сетки, чтобы он мог иметь к нему доступ.

Кроме того, вы не хотите внедрять компонент через конструктор. Это не будет тот же экземпляр, что и компонент в шаблоне. Компоненты инициализируются и уничтожаются по мере их визуализации и удаления из представления и не существуют как одиночные сервисы, подобные сервисам.

...