Nested NgFor looping over an array of objects

Question

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

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>

I can modify the array to more optimal structure for achieving this task. Please let me know if anything is wrong with it's structure. — Kaushik, May 03 '18 at 23:44
Check this and also make sure your key names are correctly used https://stackoverflow.com/a/40331563/1339516 — Searching, May 03 '18 at 23:52
@JuvenileSnow, We can do `sourceDay.days` as shown in the demo by Ashish Ranjan. — Kaushik, May 04 '18 at 01:01

score 1 · Answer 1 · answered May 03 '18 at 23:58

1

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

answered May 03 '18 at 23:58

Ashish Ranjan

11,263
4
22
45

The interpolation is a typo here. Strangely what is working in your demo isn't working in my project. – Kaushik May 04 '18 at 00:27
In your question, you have said that your error was: `Can't bind to 'ngforOf' since it isn't a known property of 'li'.`. Is this the actual error or there's some typo in `ngforOf`? Have you used `ngforOf` somewhere instead of `ngFor`? – Ashish Ranjan May 04 '18 at 00:43
I have only used ngFor but not ngForOf anywhere – Kaushik May 04 '18 at 00:47
So this means there's a typo in the `error message` you have added to the question? – Ashish Ranjan May 04 '18 at 00:49
No the error message is showing ngForOf. Please check the screenshot. – Kaushik May 04 '18 at 00:55
@Kaushik: Oh, sorry, I guess the error shows like: `ngforOf` itself. Okay, do you have other modules too in your app? If yes, then add the `CommonModule` in the `imports[]` of the module in which your current working component is declared. – Ashish Ranjan May 04 '18 at 01:00
Yes, but have you added to the `imports` of the module in which your component is declared? Is your `Component` declared in the `AppModule` or some other `module`? – Ashish Ranjan May 04 '18 at 01:10
as Nuru pointed it out, it was a typo in my code. Sorry to make you waste so much time in this. – Kaushik May 07 '18 at 15:53

score 1 · Accepted Answer · answered May 04 '18 at 02:01

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>

you were right. As this is simple typo issue. Dumb me. – Kaushik May 07 '18 at 15:52 — Kaushik, May 07 '18 at 15:52

score 0 · Answer 3 · answered May 03 '18 at 23:51

0

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

answered May 03 '18 at 23:51

JohnnyDevNull

706
6
17

All of them were my mistakes while typing. Actual code in the project is similar with some styles added. But still getting the same error. – Kaushik May 04 '18 at 00:26

Nested NgFor looping over an array of objects

3 Answers3