ngFor inside ngFor在Angular 4对象数组中显示数组

Question

我似乎不明白为什么我的代码不起作用。我已经浏览了很多关于SO的帖子，我认为我的代码应该可行。这是我的代码：

ts文件

import { Component } from '@angular/core';

@Component({
    selector: 'my-array',
    templateUrl: './array.component.html',
})
export class ArrayComponent {
    private content: Test[];

    constructor() {
        this.content = [{
            heading: 'header',
            image: 'image',
            footerContent: 'footer',
            testData: [{
                title: 'title1',
                content: 'content1'
            }, {
                title: 'title2',
                content: 'content2'
            }]
        }]
    }
}

export class Test {
    heading: string;
    image: string;
    footerContent?: string;
    testData: TestItem[];
}

export class TestItem {
    title: string;
    content: string;
}

html文件

<div *ngFor="let test of content;">
    <h2>{{test.heading}}</h2>
    <div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
        <div *ngfor="let item of test.testData;">
            <div role="tab" id="headingone">
                <h4>
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">
                        {{item.title}}
                    </a>
                </h4>
                <div id="collapseone" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingone">
                    <div class="panel-body">
                        {{item.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>{{test.footerContent}}</div>
</div>

错误

An unhandled exception occurred while processing the request.
NodeInvocationException: Template parse errors:
Can't bind to 'ngforOf' since it isn't a known property of 'div'. (" <div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
<div [ERROR ->]*ngfor="let item of test.testData;">
<div role="tab" id="headingone">
<"): ng:///ArrayModule/ArrayComponent.html@3:13
Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("h2>
<div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
[ERROR ->]<div *ngfor="let item of test.testData;">
<div role="tab" id="headingone">
"): ng:///ArrayModule/ArrayComponent.html@3:8

Answer 1

我不知道这是否能解决整个问题，但是你的第二个*ngFor应该是全部小写，*ngfor。 Angular是区分大小写的，所以要修复它，看看你得到了多少。