Question

我正在使用kendoUI开发和角度4组件。我使用kendoUI网格来显示json数据。在调试时我可以看到该服务正在拉动记录。据我所知，我已将datagrid绑定到服务正确返回的数据。不确定问题是什么

movie.component.ts

import {Component, OnInit} from '@angular/core';
import {MovieService} from './movie.service';
import {IMovie} from './movie.interface';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
import { SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { MRDBGlobalConstants } from '../shared/mrdb.global.constants';

@Component({
  moduleId: module.id,
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css'],
  providers:[MovieService]
})

export class MovieComponent implements OnInit {

public gridView : GridDataResult;
public pageSize : number;
public sort: SortDescriptor[] = [];
public skip: number = 0;
public movieResponses: IMovie[] = [];

public movieList : IMovie[];

  constructor(private movieService : MovieService) {

   }

  ngOnInit() {
    this.pageSize = MRDBGlobalConstants.GridPageSize;
    this.movieService.getMovies().subscribe((result : IMovie[]) => {
    this.movieList = result;
    this.getMovies();
    });

  }

public sortChange(sort: SortDescriptor[]) : void{
      this.sort  = sort;
      this.getMovies();
}

public pageChange(event: PageChangeEvent) : void{
      this.skip = event.skip;
      this.getMovies(); 
}

  private getMovies() : void
  {
      var sortedSR = this.movieList;
        if (this.sort && this.sort.length > 0) {
            if (this.sort[0].dir === undefined) this.sort[0].dir = "asc";
            sortedSR = orderBy(this.movieList, this.sort);
        }

    this.gridView = {
            data: sortedSR.slice(this.skip, this.skip + this.pageSize),
            total: this.movieList.length
        };
    }
}

movie.service.ts

import {Injectable} from '@angular/core';
import {MRDBCommonService} from '../shared/services/mrdb.common.service';
import {IMovie} from './movie.interface';
const URL_MOVIE = '/api/movie';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';

@Injectable()
export class MovieService 
{

constructor(private _mrdbCommonService: MRDBCommonService){}

  getMovies(): Observable<IMovie[]> {

        return Observable.of([
        {
            movieId: 1,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        },
        {
            movieId: 2,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        },
        {
            movieId: 3,
            name: "Titanic",
            actor: "Test1",
            director: "Test2",
            movieLength: 2
        }
    ]);
    }
    createMovie(){

    }

    deleteMovie(){

    }

}

movie.interface.ts

export interface IMovie{

    movieId:number;
    name:string;
    actor:string;
    director:string;
    movieLength:number;  
}

movie.component.html

<!-- **************************
MAIN TITLE BAR
******************************* -->


<div class="section-title">
    <div class="title">
        <h1>Movie Results</h1>
    </div>
</div>

<!--  ################### -->
<!--  MAIN CONTENT START -->
<!--  ################### -->

<section id="main-content">
    <section class="wrapper">
        <div class="row mt">

            <div class="col-lg-12">
                <div class="content-panel">

                    <section id="no-more-tables">
                        <table id="holdingTable" class="table table-bordered table-striped table-condensed cf">
                            <tbody>
                                <tr>
                                    <td id="kendoGridHoldingColumn">
                                        <kendo-grid #grid [data]="gridView" class="table table-bordered table-striped table-condensed cf"
                                                    [scrollable]="'none'"
                                                    [sortable]="{ mode: 'single' }"
                                                    [sort]="sort"
                                                    (sortChange)="sortChange($event)"
                                                    [(pageSize)]="pageSize"
                                                    [skip]="skip"
                                                    [pageable]="true"
                                                    (pageChange)="pageChange($event)">
                                            <kendo-grid-column field="movieId" title="movieId" *ngIf="false">
                                            </kendo-grid-column>
                                            <kendo-grid-column field="name" title="Name" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
                                                <ng-template kendoGridHeaderTemplate let-column>
                                                    Name &nbsp;
                                                    <i class="fa fa-sort" aria-hidden="true"></i>
                                                </ng-template>
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="Name">
                                                        {{dataItem.name}}
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>
                                            <kendo-grid-column field="actor" title="Email" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
                                                <ng-template kendoGridHeaderTemplate let-column>
                                                    Actor &nbsp;
                                                    <i class="fa fa-sort" aria-hidden="true"></i>
                                                </ng-template>
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="Actor">
                                                        {{dataItem.actor}}
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>
                                            <kendo-grid-column field="director" title="Director" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
                                                <ng-template kendoGridHeaderTemplate let-column>
                                                    Director &nbsp;
                                                    <i class="fa fa-sort" aria-hidden="true"></i>
                                                </ng-template>
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="Director">
                                                        {{dataItem.director}}
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>
                                            <kendo-grid-column field="movieLength" title="Movie Length" data-title="Movie Length" headerClass="kendoGridHeader" class="kendoGridCellSurveyResponsesList">
                                                <ng-template kendoGridHeaderTemplate let-column>
                                                    Movie Length &nbsp;
                                                    <i class="fa fa-sort" aria-hidden="true"></i>
                                                </ng-template>
                                                <ng-template kendoGridCellTemplate let-dataItem>
                                                    <span data-title="Movie Length">
                                                        {{dataItem.movieLength}}
                                                    </span>
                                                </ng-template>
                                            </kendo-grid-column>

                                        </kendo-grid>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </section><!-- / #no-more-tables -->
                </div><!-- / content-panel -->
            </div><!-- / col-lg-12 -->
        </div><!-- / row -->
        <!-- / main content -->
    </section><!-- / wrapper -->
</section><!-- / #main-content -->

Answer 1

这已经解决了。原因是因为pageSize是0.我将它设置为10并且它可以工作。

服务数据未绑定到kendoUI网格

1 个答案: