Angular2迭代对象数组答案

【问题标题】：Angular2 iterate over array of objectsAngular2迭代对象数组
【发布时间】：2017-04-06 12:26:09
【问题描述】：

我有一个如下数组：

causes: any= [
{
    'Specification': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
    'Design': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
    'Code': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
    'Documentation': {
        'Missing':false,
        'Unclear':false,
        'Wrong':false,
        'Changed':false,
        'Better Way':false,
    },
}]

如何在我的模板中对其进行迭代？我试过类似的东西：

<div class="mdl-grid">
    <div *ngFor=" let chunk of causes | chunks: 2; let j = index; " class="mdl-cell mdl-cell--4-col">
        <label *ngFor=" let cause of chunk| values " #checkbox class="mdl-checkbox mdl-js-checkbox">
            <input type="checkbox" name="causes" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label">{{cause}}</span>
        </label>
    </div>
</div>

但它仍然给了我[object Object]。我正在尝试填充每个原因并针对它进行这 5 个复选框。

【问题讨论】：

ngFor 只接受一个数组，但你正试图从我所看到的范围内迭代一个对象。
let chunk of causes[0] 应该澄清一下情况。

标签： angular

【解决方案1】：

在您提供的代码中，数组中只有一个对象。

我假设你的数组应该是这样的：

causes: any = [
    {
        name: 'Specification',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    },
    {
        name: 'Design',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    },
    {
        name: 'Code',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    },
    {
        name: 'Documentation',
        values: {
            'Missing': false,
            'Unclear': false,
            'Wrong': false,
            'Changed': false,
            'Better Way': false,
        },
    }
]

你的 html 应该是这样的

    <div class="mdl-grid">
        <div *ngFor=" let chunk of causes" class="mdl-cell mdl-cell--4-col">
            <div>Checkboxes for {{chunk.name}}</div>
            <div *ngFor=" let cause of chunk.values | keys">
               <label  #checkbox class="mdl-checkbox mdl-js-checkbox">
                   <input type="checkbox" [name]=" chunk.name + '_' + cause" class="mdl-checkbox__input">
                    <span class="mdl-checkbox__label">{{cause}}</span>
               </label>
            </div>
        </div>
    </div>

其中 keys 管道是一个自定义管道，它返回对象的键，它是字符串数组。管道代码：

管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'keys',
    pure: false
})
export class KeysPipe implements PipeTransform {
    transform(value, args: string[]): any {
        return Object.keys(value);
    }
}

【讨论】：

这是一个更好的解决方案，只是它只使用此代码打印 []false,[]true 而不是：带有五个复选框的规范，每个复选框都带有标签 Missing、Unclear 等。
是的，完美！我已经这样做了：）感谢您更改数组结构的建议。这更有意义！
干杯！很高兴它有帮助。
如果我理解正确，我创建了一个 plunker 示例：plnkr.co/edit/rOuKEDHLOCfBOBjwB2Xi
是的，没错，就是这样！谢谢！

【解决方案2】：

对一个对象进行迭代是不可能开箱即用的。但是，您可以使用如下所示的自定义管道。

  import { PipeTransform, Pipe } from '@angular/core';
  @Pipe({name: 'keys'})
  export class KeysPipe implements PipeTransform {
    transform(value, args:string[]) : any {
     let keys = [];
     for (let key in value) {
       keys.push(key);
      }
      return keys;
    } 
  }

并将其用作

  <tr *ngFor="#c of content">           
   <td *ngFor="#key of c | keys">{{key}}: {{c[key]}}</td>
  </tr>

看看here

【讨论】：