Угловой 2+ NgTemplateOutlet внутри ngFor

Question

У нас есть несколько массивов, таких как:

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

Answer 1

Попробуйте что-то вроде этого:

<ng-container
    *ngFor="let individual of heroes"
    [ngTemplateOutlet]="individualParagraphContent"
    [ngTemplateOutletContext]="{individual: individual}"></ng-container>

и для шаблона:

<ng-template let-individual="individual" #individualParagraphContent>
    <p>
       {{ individual.name }} - {{ individual.mobileNumber }}
       ...
    </p>
<ng-template>

let- (x) = "ключ для х в контексте"