Question

我有这些代码：

moduleOne.component.ts：

@Component({
  selector: 'one',
  templateUrl: './moduleOne.component.html'
})


export class ModuleOneComponent {

  private ag: AgGridModel;

  private columnDefs = [    
    {headerName: "Sport", field: "sport", width: 110, suppressMenu: true},
    {headerName: "Gold", field: "gold", width: 100, suppressMenu: true},
    {headerName: "Silver", field: "silver", width: 100, suppressMenu: true},
    {headerName: "Bronze", field: "bronze", width: 100, suppressMenu: true},
    {headerName: "Total", field: "total", width: 100, suppressMenu: true}
  ];

  constructor(){
    this.ag.id = "one";
    this.ag.tableName = "module one";
    this.ag.colDefs = this.columnDefs;

    // Define delegate button
    var delegateBtn = new buttonModel(
      'delegateId',
      'Delegate',
      'glyphicon icon-arrow_right',
      this.delegateJob
    ) ;

    // Define print button
    var printBtn = new buttonModel(
      'printId',
      'Print',
      'glyphicon print',
      this.printJob
    );

    this.ag.gridButtons.push(printBtn);
    this.ag.gridButtons.push(delegateBtn);
  }


  private delegateJob() {

    // TODO: call delegateModal
    return;
  }

  private printJob() {

    // TODO: call delegateModal
    return;
  }
}

moduleOne.component.html：

<div class="container-fluid single-col-full-width-container">
  <ag-grid-common [ag]="ag" ></ag-grid-common>
</div>

AG-网格common.component.ts：

@Component({
  selector: 'ag-grid-common',
  templateUrl: './ag-grid-common.component.html'
})

export class AgGridCommonComponent implements OnInit {

  @Input() public ag: AgGridModel;
  private gridOptions:GridOptions;
  private rowCount;

  ngOnInit(){

    this.gridOptions = this.ag.gridOptions;

    // Dynamically create ag-grid in the selected element
    var idSelector = '#' + this.ag.id;
    var gridDiv = <HTMLInputElement>document.querySelector(idSelector);
    new Grid(gridDiv, this.gridOptions);

    this.createNewDatasource();
  }

  constructor() {

  }
}

AG-网格common.component.html：

<div style="width: 100%">

  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-1" *ngFor="let btn of ag.gridButtons">
        <cui-button [id]="btn.id" [iconClass]="btn.icon" (click)="btn.callbackFunc">{{btn.name}}</cui-button>
      </div>
    </div>
  </div>
<div style="height: 320px; padding-top: 10px;" [id]="ag.id" class="ag-fresh"></div>

ag-grid-common的ag变量是来自moduleOne的输入变量 ag变量的一些属性用于ag-grid-common.component.html

我收到了这个错误：ag-Grid：没有为网格提供div元素

当我检查页面源时，没有加载所有带有ag的指令。

这是页面来源：

<ag-grid-common ng-reflect-ag="[object Object]">
<br>
<div style="width: 100%">
  <div class="row">
    <div class="col-sm-12">
      <!--template bindings={}-->
      **<div class="col-sm-1">**
      </div> 
    </div>
  </div>

  <div style="padding: 4px; width: 100%; ">
    <div style="height: 6%;">
      Page Size:
      <select>
        <option selected="" value="10">10</option>
        <option value="100">100</option>
        <option value="500">500</option>
        <option value="1000">1000</option>
      </select>
    </div>

    <div class="ag-fresh" style="height: 320px; padding-top: 10px;"></div>
    <br></div>

</div>
</ag-grid-common>

Answer 1

在AgGridCommonComponent.ngOnInit()中，您查询DOM但DOM可能尚未可用。此代码应移至ngAfterViewInit()

如何以角度2正确地将数据从组件传递到另一个组件

1 个答案: