Question

我试图从api中检索json数据，并使用kendo网格填充模板。有谁能告诉我我错在哪里？我可以在调试中检索数据，但不能在模板中填充。以下是示例代码：

最近-sales.component.ts

＆＃13;

import {Component,OnInit} from '@angular/core';
import {GridDataResult,PageChangeEvent} from '@progress/kendo-angular-grid';
import {Headers,Http,RequestOptions,Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-recent-sales',
  templateUrl: './recent-sales.component.html'
})

export class RecentSalesComponent implements OnInit {

  private gridView: GridDataResult;
  private data: Object[];
  private pageSize: number = 10;
  private skip: number = 0;

  private items: any[];

  constructor(private http: Http) {
    this.loadItems();


    http.get('http://www.json-generator.com/api/json/get/crdokgCHma?indent=3')
      .map(res => res.json())
      .subscribe(data => {
        this.items = data;
      });
  }

  ngOnInit() {

  }

  protected pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadItems();
  }

  private loadItems(): void {
    this.gridView = {
      data: this.items.slice(this.skip, this.skip + this.pageSize),
      total: this.items.length
    };
  }

}

＆＃13;

最近-sales.component.html

＆＃13;

<kendo-grid [selectable]="true" [data]="gridView" [pageSize]="pageSize" [skip]="skip" [pageable]="true" (pageChange)="pageChange($event)">
  <kendo-grid-column field="date" [width]="80" title="Date / Time" [class]="{'rs-date-time rs-table': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div>{{dataItem.date}}</div>
      <div>{{dataItem.time}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="transactionId" [width]="150" title="Transaction ID" [class]="{'rs-transaction-id': true}"></kendo-grid-column>
  <kendo-grid-column field="outletName" [width]="220" title="Outlet" [class]="{'rs-outlet': true}"></kendo-grid-column>
  <kendo-grid-column field="amountPaid" title="Amount Paid" width="100" [class]="{'rs-amount-paid': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'amount-success' : 'amount-void'}}">{{dataItem.amountPaid | currency:'MYR':true:'1.2-2'}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="status" title="Status" width="100" [headerClass]="{'rs-status-col': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'status-success' : 'status-void'}}">{{dataItem.status}}</div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

＆＃13;

Answer 1

更改代码如下。 1.在ngInit上调用http方法并在数据可用后调用loadItems方法。声明一个类变量，它将在渲染模板之前检查数据是否可用。

import {Component,OnInit} from '@angular/core';
import {GridDataResult,PageChangeEvent} from '@progress/kendo-angular-grid';
import {Headers,Http,RequestOptions,Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-recent-sales',
  templateUrl: './recent-sales.component.html'
})

export class RecentSalesComponent implements OnInit {

  private gridView: GridDataResult;
  private data: Object[];
  private pageSize: number = 10;
  private skip: number = 0;
  private dataAvailable:boolean=false;

  private items: any[];

  constructor(private http: Http) {
   
  }

  ngOnInit() {
   
    http.get('http://www.json-generator.com/api/json/get/crdokgCHma?indent=3')
      .map(res => res.json())
      .subscribe(data => {
        this.items = data;
        this.loadItems();//if it gives error saying not found,then move this http method to ngAfterViewInit
      });

  }

  protected pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadItems();
  }

  private loadItems(): void {
    this.gridView = {
      data: this.items.slice(this.skip, this.skip + this.pageSize),
      total: this.items.length
    };
    this.dataAvailable=true;
  }

}

<div *ngIf="dataAvailable">
<kendo-grid [selectable]="true" [data]="gridView" [pageSize]="pageSize" [skip]="skip" [pageable]="true" (pageChange)="pageChange($event)">
  <kendo-grid-column field="date" [width]="80" title="Date / Time" [class]="{'rs-date-time rs-table': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div>{{dataItem.date}}</div>
      <div>{{dataItem.time}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="transactionId" [width]="150" title="Transaction ID" [class]="{'rs-transaction-id': true}"></kendo-grid-column>
  <kendo-grid-column field="outletName" [width]="220" title="Outlet" [class]="{'rs-outlet': true}"></kendo-grid-column>
  <kendo-grid-column field="amountPaid" title="Amount Paid" width="100" [class]="{'rs-amount-paid': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'amount-success' : 'amount-void'}}">{{dataItem.amountPaid | currency:'MYR':true:'1.2-2'}}</div>
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="status" title="Status" width="100" [headerClass]="{'rs-status-col': true}">
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
      <div class="{{dataItem.status == 'successful' ? 'status-success' : 'status-void'}}">{{dataItem.status}}</div>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>
</div>

我对kendo知之甚少，所以如果外部div有问题，请在你指定kendo-grid的下一行使用* ngIf条件。希望这可行

Kendo angular 2 grid - 获取http请求

1 个答案: