Угловой: Вставить новый .row в ngFor условие

Question

Я новичок в Angular, поэтому я решил попробовать их учебник, но с небольшими изменениями.По сути, у меня есть следующий массив:

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

И цель состоит в том, чтобы перечислить их на экране с помощью * ngFor, поэтому я искал несколько способов сделать это, и это было наиболее логичным для меня, чтобы сделать, но это не работает.

<div class="container-fluid bg-secondary padding-sm margin-sm rounded">
    <div class="row">

        <div *ngFor="let hero of heroes; let index = index">

            <div class="col-lg-4 bg-lightblue rounded">

                <p class="text-secondary lead">
                    <span  class="text-info text-uppercase lead font-weight-bold">
                        {{ hero.name}}
                    </span> 

                    Details
                </p>

                <p>
                    <span class="font-weight-bold text-success">
                        ID: 
                    </span>

                    {{ hero.id }}
                </p>

                <p>
                    <span class="font-weight-bold text-success">
                        Name: 
                    </span>

                    {{ hero.name }}
                </p>

                <label class="font-weight-bold">Change name: 
                    <input [(ngModel)]="hero.name" class="input-md" type="text" placeholder="name">
                </label>

            </div>

            {{ (index + 1) % 3 }}

            <div class="row" *ngIf="(index + 1) % 3 == 0"></div>

        </div>

    </div>
</div>

То, что я пытаюсь сделать, это начать циклически проходить по списку, и когда он достигает 3 столбцов, он добавляет строку, проверяя, если (index + 1)% 3 равно 0 и продолжает добавлять столбцы в следующую строку.Прямо сейчас это не добавляет строку, когда условие в ngIf верно.Что я делаю не так?

Answer 1

объявите heroes и обновите его так, как вы хотите отобразить в HTML, то есть 3 столбца подряд

heroes = [];
HEROES.forEach((hero, index) => {
    if(index % 3 == 0) {
        let row = [];
        row.push(hero);
        this.heroes.push(row);
    } else {
        this.heroes[this.heroes.length - 1].push(hero);
    }
});

он сгенерирует heroes как:

[ 
  [ { "id": 11, "name": "Mr. Nice" }, { "id": 12, "name": "Narco" }, { "id": 13, "name": "Bombasto" } ], 
  [ { "id": 14, "name": "Celeritas" }, { "id": 15, "name": "Magneta" }, { "id": 16, "name": "RubberMan" } ], 
  [ { "id": 17, "name": "Dynama" }, { "id": 18, "name": "Dr IQ" }, { "id": 19, "name": "Magma" } ], [ { "id": 20, "name": "Tornado" } ] 
]

затемВы можете обновить HTML, как хотите.

HTML

<div class="row" *ngFor="let rowData of heroes">
    <div class="col-lg-4 bg-lightblue rounded" *ngFor="let hero of rowData">
        <p class="text-secondary lead">
            <span  class="text-info text-uppercase lead font-weight-bold">{{ hero.name}}</span> Details
        </p>
        <p>
            <span class="font-weight-bold text-success">ID: </span>{{ hero.id }}
        </p>
        <p>
            <span class="font-weight-bold text-success">Name: </span>{{ hero.name }}
        </p>
        <label class="font-weight-bold">Change name: 
            <input [(ngModel)]="hero.name" class="input-md" type="text" placeholder="name">
        </label>
    </div>
</div>