CODEWITHSUNDEEP
htmlangularangular5ngfor
Kaushik
Kaushik

Reputation: 133

Nested NgFor looping over an array of objects

I am using angular 5. I am trying to use the following array in nested ngFor loops in html

Object:

    [
    {
        "copyFromDay": "Sunday",
        "days": [
           "Monday",
           "Tuesday",
           "Wednesday",
           "Thursday",
           "Friday",
           "Saturday"
        ]
    },
    {
        "copyFromDay": "Monday",
        "days": [
            "Sunday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ]
    }//,....   
]

HTML:

<table>
        ....
    <tr>
        <td *ngFor="let sourceDay of copyToArray">
            <label>sourceDay.copyFromDay</label>
                <ul><li *ngFor="let day of sourceDay.days">
                <label><input type="checkbox" />{{day}}</label>
                </li></ul>
        </td>
    </tr>
<table>

I am getting the following parsing error:

Can't bind to 'ngforOf' since it isn't a known property of 'li'. enter image description here

I have imported BrowserModule and CommonModule in the app.module.ts I am doing this so that the user can copy a schedule from any day of the week to the rest of the week.

EDIT: Actual HTML from my code:

<td *ngFor = "let sourceDay of copyFromArray">
    <div class="copytodiv">
        <div class="dropdown">
            <button type="button" class="btn btn-default btn-raised copytobtn dropdown-toggle" data-toggle="dropdown">Copy to <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
            <ul class="dropdown-menu">
                <li *ngfor="let day of sourceDay.days">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {{day}}
                        </label>
                    </div>                                                        
                </li>
            </ul>
        </div>
    </div>
</td>

Upvotes: 2

Views: 1836

Answers (3)

Nuru Salihu
Nuru Salihu

Reputation: 4928

You are spelling *ngFor wrong. It's *ngFor with the capital F not *ngfor as you did in the li.So basically. change

 <li *ngfor="let day of sourceDay.days">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {{day}}
                        </label>
                    </div>                                                        
                </li>

to 

<li *ngFor="let day of sourceDay.days">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {{day}}
                        </label>
                    </div>                                                        
                </li>

Upvotes: 1

Ashish Ranjan
Ashish Ranjan

Reputation: 12950

I don't see any problem with the Module imports, The only mistake I see is, you have referred sourceDay.day instead of sourceDay.days, and you have missed interpolation for labelsourceDay.copyFromDay I implemented your code and its running fine for me, see the example here: Demo

Upvotes: 1

JohnnyDevNull
JohnnyDevNull

Reputation: 982

1st wrap the li within a ul

2nd sourceDay.days, you have missed the s on the end

3th the second label should surround the input and the day

Upvotes: 0

Related Questions