@LazarchukNazar
Джаваскриптизер

Как работает ng-content в цикле *ngFor?

Делаю игру на Angular, что бы выучить даный фреймворк.
Игра 2048. Есть поле, а на нём ячейки с цифрами 2, 4, 8, ...;

Компонент поле "Field":
<ng-container *ngFor="let row of matrix, let i = index">
      <ng-container *ngFor="let col of matrix[i], let j = index">
        <div class="col-box">
          <ng-content></ng-content>
          {{ i + ':' + j }}
        </div>
      </ng-container>
    </ng-container>


Оставляю ng-content, что бы извне передать внутрь ячейку.

Но когда я что-то передаю, отображаеться только последний в цикле (см код и скриншот), а должны быть заповнены все ячейки.
<app-field>
    <h1>Work</h1>
</app-field>

5fbcecae0adc2214472740.png

Что я делаю не так? И как должна работать композиция компонентов в данном случае?

Тот же код, только на Svelte.js (в котором всё работает как и задумано):
<!-- компонент Field-->
{#each new Array(squares) as row, i}
    {#each new Array(squares) as col, j}
      <div class="col-box" style={getColStyles(i, j)}>
        <slot {i} {j} />
      </div>
    {/each}
  {/each}

  <!-- компонент Game -->
  <Field let:i let:j>
    <Col {i} {j} />
  </Field>
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Xuxicheta
@Xuxicheta Куратор тега Angular
инженер
Так он и работает, все правильно. Переставляет каждый раз на новое место, в итоге контент оказывается там, где есть последний ng-content.

Для размножения надо вставлять через темплейт или структурную директиву. Например так https://stackblitz.com/edit/angular-ivy-qav868?fil...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
17 янв. 2021, в 01:26
100000 руб./за проект
16 янв. 2021, в 22:34
10000 руб./за проект
16 янв. 2021, в 22:33
20000 руб./за проект