CODEWITHSUNDEEP
arraysangulartypescriptngfor
CodeWarrior
CodeWarrior

Reputation: 5176

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

I don't seem to understand as to why my code is not working. I've gone through a lot of posts on SO and the code I have, in my opinion, should work. Here is my code:

ts file

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 file

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

error

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

Upvotes: 0

Views: 3147

Answers (1)

kshetline
kshetline

Reputation: 13734

I don't know if this will fix the whole problem, but what should be your second *ngFor has been entered in all lowercase, *ngfor. Angular is case sensitive, so fix that and see how much further you get.

Upvotes: 5

Related Questions