Question

我想迭代一个对象数组但是我收到了以下错误：

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

以下是我的代码的一部分：

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

其中ColumnConfig是数组中包含的所有实例的类。

// 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);`           
}

模板：

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

我在这里缺少什么？

Answer 1

您可以使用RX js map运算符迭代并生成值数组。

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

我发现了问题：它与组成数组的对象中定义的字符串变量的默认值有关。所以，我将默认变量更改为空字符串（''）并且它有效。

angular2如何迭代对象数组

2 个答案: