GridLayout Not Dipslaying Complete Data


#1

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="{{val.id}}" col="0" row="i"></TextField>
        <TextField text="{{val.name}}" col="1" row="i"></TextField>        
    </GridLayout>

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) {
      ... 
      this.listService.getList()
          .subscribe(
			(result) => { 	
				console.dir(result);														
				this.data = result.data;	
				this.itemSpec = this.createItemSpec(this.data.length);
            },
			(error) => {
				...							
			}			
		);
  }
  
  createItemSpec(length) {
    var itemSpec = [];
    for (var i=0; i<length; i++) {
      itemSpec.push("auto");
    }
    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.


#2

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


#3

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