Angular 2：将字符串传递给ngTemplateOutlet

发布时间：2020-12-17 17:24:09 所属栏目：安全来源：网络整理

导读：我正在尝试为字符串数组的每个字段传递一个不同的模板. TS export class MyComponent { fields = ['name','person.age','created_at',...]} HTML div *ngFor="let field of fields" ng-container [ngTemplateOutlet]="field" /ng-container/divng-template #

我正在尝试为字符串数组的每个字段传递一个不同的模板.

export class MyComponent {
  fields = ['name','person.age','created_at',...]
}

HTML

<div *ngFor="let field of fields">
   <ng-container [ngTemplateOutlet]="field">

   </ng-container>
</div>

<ng-template #name>
   Name template
</ng-template>

<ng-template #created_at>
    Created at template
</ng-template>

<ng-template #person.age>
     person.age template
</ng-template>

我显然得到一个错误,因为ngTemplateOutlet需要一个TemplateRef而不是一个字符串.但是如何动态传递一个字符串来引用正确的模板呢？

错误：templateRef.createEmbeddedView不是函数

PS：他们可能是解决这个问题的更好方法.不要犹豫:)分享:)谢谢！

解决方法

你可以像这样写：

<div *ngFor="let field of fields">
   <ng-container *ngTemplateOutlet="{'name': name,'created_at': created_at,'person_age': person_age}[field]">

   </ng-container>
</div> 

<ng-template #name>
    Name template
</ng-template>

<ng-template #created_at>
    Created at template
</ng-template>

<ng-template #person_age>
     person.age template
</ng-template>

这不需要子组件.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!