У нас есть несколько массивов, например:
heroes: Hero[];villains: Villain[];- ...
puppies: Puppy[]
и такой шаблон
<p *ngFor="let individual of heroes">
{{ individual.name }} - {{ individual.mobileNumber }}
...
</p>
<p *ngFor="let individual of villains">
{{ individual.name }} - {{ individual.mobileNumber }}
...
</p>
...
<p *ngFor="let individual of puppies">
{{ individual.name }} - {{ individual.mobileNumber }}
...
</p>
Петли *ngFor имеют одинаковое содержание. Чтобы упростить это, мы создаем один ng-template, который мы можем использовать повторно.
<ng-template let-individual #individualParagraphContent>
{{ individual.name }} - {{ individual.mobileNumber }}
...
<ng-template>
Теперь мы хотим использовать его, например:
<p *ngFor="let individual of puppies">
<ng-content *ngTemplateOutlet="individualParagraphContent;
context: {individual: individual}">
</ng-content>
</p>
Здесь я потерпел неудачу. Я нашел примеры, где весь цикл *ngFor находится в шаблоне и как передать значение из самого компонента, но мне не удалось вставить <ng-template> в цикл for и правильно передать переменную (индивидуальную).
ИЗМЕНИТЬ Решено. Все было хорошо, но инициализация в ng-template
<ng-template let-individual="individual" #individualParagraphContent>
