服务数据绑定后出现“No Row To Show”消息

时间:2017-09-30 12:18:57

标签: ag-grid

“无行显示”消息显示在网格中,但网格显示一行数据。

我有一个demoComponent.ts和html文件。 请参考我的以下代码

demoComponent.ts

import { GridOptions } from "ag-grid/main";
import { Service } from '../Services/service';

@Component({
    .
    templateUrl: 'demoComponent.html',
    .
})
@Injectable()
export class demoComponent implements OnInit {
    GridOptions: GridOptions;
    GridColumnDefs: any[];
    GridData: any[];
    data1 : any[]
 constructor(private Service: Servicee) {      
    }   
    ngOnInit() {    
         this.GridOptions = <GridOptions>{
            enableFilter: false,
            rowSelection: 'multiple',
            enableSorting: true,
            enableColResize: true,
            singleClickEdit: true,
            animateRows: true,
            headerHeight: 50,
            rowClass: 'rowClass'
        };      
        Observable.forkJoin(
            this.Service.methed1(this.id),
            this.Service.methed1(this.id),
            this.Service.methed1(this.id),
            this.Service.methed1()
        ).subscribe(response => {
            this.data1 = <any>response[0];
            this.data2 = <any>response[1];
            this.data3 = <any>response[2];
            this.data4 = <any>response[3];
            this.GridBind()            
        });
    }

    GridBind()
    {
        this.GridColumnDefs = [
            { headerName: "", field: "id", hide: true },
            { headerName: "Column1", field: "Column1", width: 70, editable: true, tooltipField: "release", headerTooltip: "Release" },
            { headerName: "Column2", field: "Column2", width: 80, editable: true, tooltipField: "Column2", headerTooltip: "Column2",
                //cellEditorFramework: EstimatingSourceComponent
                cellEditorFramework: EstimatingSourceComponent,
                cellEditorParams: {
                    dropDownValue: this.data1,
                }
            },
            { headerName: "Column3", field: "Column3", width: 70, editable: true },
            { headerName: "Column4", field: "Column4", width: 70, editable: true },
        ];

        this.GridData = [
            {
                id: 1, Column1: this.data1.value1, Column2: this.data1.value2, Column3: this.data1.value3, Column4: this.data1.value4
            }
        ];
    }
}

然后是demoComponent.html

<ag-grid-angular style="width: 100%; height: 350px;"
     id="grid1"
     class="ag-fresh"
     [rowData]="GridData"
     [columnDefs]="GridColumnDefs"
     [gridOptions]="GridOptions">
</ag-grid-angular>

渲染一行与网格绑定。但是“No Row To Show”正在显示。

如果错误,请更正我的实施。

提前致谢

0 个答案:

没有答案