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 区分大小写，所以修正它，看看你能走多远。

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

ngFor inside ngFor to display the array inside an array of objects Angular 4

arrays

typescript

ngfor

angular