如何基于对象属性使用 ngFor 动态加载多个 ng 模板

Question

[Step1] 我有一个对象"文章"，它有一个由多个内容元素组成的数组。根据元素的类型(例如标题/图像(，应显示不同的模板。如果没有必要，我不想为此明确拥有自己的组件，所以我猜测是否需要 ViewChild 或 ContentChild？

我已经研究了所有与ngTemplate相关的问题，但还没有找到解决方案。 我试图重写 https://stackblitz.com/edit/angular-q1y2vz 从 ngTemplateOutlet 与动态值，但到目前为止失败了。

组件.ts

articles: any[] = [ {
"id_seq": "1234",
"content":[
{
"id": "123456",
"order": 0,
"type": "header",
"data":
{
"text": "loremipsum"
}
},
{
"id": "234567",
"order": 1,
"type": "image",
"data":
{
"url": "http://www.google.de/image.jpg"
}
}]
}]

组件.html

<ng-container *ngFor="let content of articles[0]?.content;">
<ng-container [ngTemplateOutlet]="content?.type">
</ng-container>
</ng-container>

<ng-template #header >
<p>I'm a header</p>
</ng-template>
<ng-template #image >
<p>I'm an image</p>
</ng-template>

根据ngTemplateOutlet的语法和代码位置，我得到一个错误

templateRef.createEmbeddedView 不是一个函数

或者什么都不渲染。

如果我键入像"header"这样的静态字符串，它可以工作。所以我猜，内容？。类型不是要走的路。 另一方面，这样的东西工作正常：

<accordion>
<accordion-group heading="articlecontent" [isOpen]="isFirstOpen">
<div class="accordion_no_side_margin">
<accordion-group *ngFor="let content of articles[0]?.content"
[heading]="content?.type">
{{ content?.id }}
{{ content?.order }}
{{ content?.type }}
{{ content?.data }}
</accordion-group>
</div>
</accordion-group>
</accordion>

[步骤2] 最终，我确实希望合并两个代码片段，以便ng模板应该在手风琴中执行。

[步骤3] 稍后我打算添加ngTemplateOutletContext并提供一些信息，但是没有它，其他步骤应该可以正常工作。

目前我正在使用 @angular开发套件/核心 8.1.3

Answer 1

由于它只是出于某种原因不想与ngSafe一起工作，我尝试了ngSwitchCase，它工作得很好，从那时起就再也没有落后过。 (虽然在外面有模板/ng容器会很好(

<ng-container *ngFor="let content of localArticles[0]?.content">
<ng-container [ngSwitch]="content?.type">
<ng-container *ngSwitchCase="'header'">
<p>I'm a header</p>
</ng-container>
<ng-container *ngSwitchCase="'image'">
<p>I'm an image</p>
</ng-container>
</ng-container>
</ng-container>

Answer 2

不知道代码中的articles[0]?.content是怎么回事，但可以这样尝试：

<ng-container *ngFor="let content of articles[0]?.content;">
<ng-container *ngIf="content?.type == header; then header; else image"></ng-container>
<ng-template #header >
<p>I'm a header</p>
</ng-template>
<ng-template #image >
<p>I'm an image</p>
</ng-template>
</ng-container>

如果上面不起作用，请尝试这样做 您的数组未加载：

<div *ngIf="articles | async as artic">
<ng-container *ngFor="let article of artic">
<ng-container *ngfor="let ar of article.content">
<ng-container *ngIf="ar.type == header; then header; else image"></ng-container>
<ng-template #header>
<p>I'm a header</p>
</ng-template>
<ng-template #image>
<p>I'm an image</p>
</ng-template>
</ng-container>
</ng-container>
</div>

如果您有硬编码数组，则可以删除| async管道。

对你告诉我的赞美发誓：

<div *ngIf="articles | async as artic">
<ng-container *ngFor="let article of artic">
<ng-container *ngfor="let ar of article.content">
<ng-container *ngIf="ar.type == 'header'"><p>I'm a header</p></ng-container>
<ng-container *ngIf="ar.type == 'image'"><p>I'm a header</p></ng-container>
<ng-container *ngIf="ar.type == 'pain in ass'"><p>I'm a header</p></ng-container>
<ng-container *ngIf="ar.type == 'love masturbating'"><p>I'm a header</p></ng-container>
<ng-container *ngIf="ar.type == 'love dogs'"><p>I'm a header</p></ng-container>
</ng-container>
</ng-container>
</div>