Вложенное NgFor зацикливание на массиве объектов - PullRequest
Новая
       12

Вложенное NgFor зацикливание на массиве объектов

0 голосов
/ 04 мая 2018

Я использую угловой 5. Я пытаюсь использовать следующий массив во вложенных циклах ngFor в HTML

Объект: 

    [
    {
        "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'. enter image description here

Я импортировал BrowserModule и CommonModule в app.module.ts Я делаю это так, чтобы пользователь мог копировать расписание с любого дня недели до остальной части недели.

EDIT: Фактический 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>

Ответы [ 3 ]

0 голосов
/ 04 мая 2018

Я не вижу проблем с импортом модуля, Единственная ошибка, которую я вижу, это то, что вы указали sourceDay.day вместо sourceDay.days, и вы пропустили интерполяцию для метки sourceDay.copyFromDay Я реализовал ваш код и он работает нормально для меня, см. Пример здесь: Демо

0 голосов
/ 04 мая 2018

Вы пишете *ngFor неправильно. Это *ngFor с большой буквы F, а не *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>
0 голосов
/ 04 мая 2018

1-я упаковка в уль

2nd sourceDay.days, вы пропустили s в конце

3-я вторая метка должна окружать ввод и день

...