angular2如何迭代对象数组

Question

I want to iterate an array of objects but I received the following error:

inline template:25:9 caused by: Cannot read property 'length' of null

The followings are parts of my code:

// Definition of the array
public columnsConfig: Array<ColumnConfig>;

where ColumnConfig is a class of all the instances included in the array.

// Constructor of the component
this.columnsConfig = new Array<ColumnConfig>();


// Function that builds the array to iterate
for(var columnName in _headers) {
  let config = new ColumnConfig(columnName, _headers[columnName]);`
   this.columnsConfig.push(config);`           
}   

Template:

<th *ngFor="let config of columnsConfig">

What am I missing here?

Answer 1

You can use RX js map operator to iterate and make an Array of values.

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';

@Component( {
  selector: 'app-root',
  template:
  `<ol>
    <li *ngFor="let config of columnsConfig ">
    {{config}}
   </li>
   </ol>`
} )
export class AppComponent
{
  ngOnInit() { this.make() }

  public columnsConfig: any[]
  public _headers: any =
  [
    { columnName: 'one', otherName: 'foo' },
    { columnName: 'two', otherName: 'boo' },
    { columnName: 'three', otherName: 'loo' }
  ];

  make()
  {
    let config = [];
    this._headers
      .map( x =>
      {
        config.push( x.columnName );

        this.columnsConfig = config;

        console.log( 'progress: ', config );
      } )
    console.log( 'final result: ', this.columnsConfig );
  }
}

Answer 2

I found the problem: it was related to a default value of a string variable defined in the object that composes the array. So, I changed the default variable to an empty string ('') and it worked.