剑道角2格 - 获取http请求

Question

我想从api中检索json数据并使用剑道网格填充模板。任何人都可以告诉我我错在哪里吗？我可以在调试中检索数据，但无法填充模板。下面是示例代码：

最近-sales.component.ts

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 
 
    }; 
 
    } 
 

 
}

最近-sales.component.html

<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>

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>

我不知道很多关于剑道，所以如果外层div被给予一定的问题，请使用* ngIf条件的下一行，您可以指定剑道，grid.Hope这个作品