嵌套的 NgFor 遍历对象数组

Question

我正在使用 angular 5. 我正在尝试在 html

的嵌套 ngFor 循环中使用以下数组

对象：

    [
    {
        "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>

我收到以下解析错误：

无法绑定到 'ngforOf'，因为它不是 'li' 的已知属性。

我在 app.module.ts 中导入了 BrowserModule 和 CommonModule 我这样做是为了让用户可以将一周中的任何一天的时间表复制到一周中的剩余时间。

编辑： 我的代码中的实际 HTML：

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

Answer 1

首先将 li 包裹在 ul

中

第二个sourceDay.days，你漏掉了最后的s

3th 第二个标签应该包围输入和日期

Answer 2

我没有发现模块导入有任何问题，我看到的唯一错误是，你引用了 sourceDay.day 而不是 sourceDay.days，并且你错过了标签 sourceDay.copyFromDay 的插值我实现了你的代码，它的运行对我来说很好，看这里的例子： Demo

Answer 3

您拼写 *ngFor 错误。它是大写字母 F 的 *ngFor，而不是 *ngfor，就像您在 li.So 中所做的那样。变化

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

到

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

嵌套的 NgFor 遍历对象数组

Nested NgFor looping over an array of objects

html

ngfor

angular

angular5