Angular2遍历对象数组 [英] Angular2 iterate over array of objects

问题描述

我有一个如下数组:

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,
    },
}]

如何在模板中对其进行迭代?我尝试过类似的事情:

How can I iterate over it in my template? I tried something like:

<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个复选框.

But it still gave me [object Object]. I am trying to populate each cause and against it those 5 checkboxes.

推荐答案

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

In the code that you presented you only have one object inside array.

我认为您的数组应如下所示:

I assume that your array should look like this:

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应该看起来像这样

Your html should look like this

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

其中key pipe是一个自定义管道，它返回对象的键，该对象是字符串数组.管道代码:

Where keys pipe is a custom pipe that returns keys of the object, which is array of strings. Code for pipe:

管道

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

这篇关于Angular2遍历对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！