Question

我正在使用角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

我没有看到模块导入有任何问题，我看到的唯一错误是，你引用了sourceDay.day而不是sourceDay.days，并且你错过了标签sourceDay.copyFromDay的插值我实现了你的代码并且它运行正常，请参阅此处的示例： Demo

Answer 2

你拼写错误*ngFor。它是*ngFor，其中大写字母F不是*ngfor，就像你在李中所做的那样。基本上。变化

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

Answer 3

首先将li包裹在ul

中

第二个sourceDay.days，你错过了最后的那个

第3个第二个标签应围绕输入和日期

嵌套NgFor循环对象数组

3 个答案: