GridLayout Not Dipslaying Complete Data


I am retrieving JSON data from a service as an array of objects in the form below:
data = [{id:“1”,name:“John”},{id:“2”,name:“Peter”},…]

In my *.html file, I have defined a GridLayout to display the data in 2 columns and dynamically populated number of rows as below:

    <GridLayout columns="*,*" rows="{{itemSpec}}" *ngFor="let val of data; let i = index">
        <TextField text="{{}}" col="0" row="i"></TextField>
        <TextField text="{{}}" col="1" row="i"></TextField>        

In my *.ts file, I have populated the value of itemSpec as follows:

export Class ListComponent implements OnInit {
  data: Object[];
  itemSpec: string;
  constructor(...private listService: ListService) {
			(result) => { 	
				console.dir(result);									 =;	
				this.itemSpec = this.createItemSpec(;
			(error) => {
  createItemSpec(length) {
    var itemSpec = [];
    for (var i=0; i<length; i++) {
    return itemSpec.join(",");

When the page loads the GridLayout only shows the record of the last data on a single row.

I would be glad if someone can point me to what I might be doing wrong.


*ngFor on GridView will render n number of grid views in loop. If you want to just render TextFields inside GridView, you have to move *ngFor one level below may be with ng-template.


@manojdcoder Thanks for the clue. I will try this out.