ngFor內部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區分大小寫，因此請修復該問題並查看獲得的結果。