如何使用 *ngFor 和 *ngIf Angular 4 将数据传递到不同的模板

Question

我有一个像下面这样的对象

let obj = [{
    templateId: 1,
    name: "Template 1"
}, {
    templateId: 2,
    name: "Template 1"
}, {
    templateId: 3,
    name: "Template 1"
}];

在 HTML 模板中，我试图根据如下所示的 tempalteId 将数据传递给不同的模板

<div *ngFor="let tmpl of obj">
    <div *ngIf="tmpl.templateId == 1; else templateTwo; context: tmpl">
        {{ tmpl.name }}
    </div>
</div>
<ng-template #templateTwo let-data="data">
    <div *ngIf="data.templateId == 2; else templateThree; context: data">
        {{ data.name }}
    </div>
</ng-template>
<ng-template #templateThree let-data="data">
    <div *ngIf="data.templateId == 3">
        {{ data.name }}
    </div>
</ng-template>

在上面的 html 模板中，基于 templateId 我想将数据传递给相应的模板，但我无法做到这一点，因为它在模板代码中抛出错误，我在这里做错了什么。

请告诉我正确的方法。

Answer 1

您可以在ng-container元素上使用* ngTemplateOutlet指令将上下文传递到所需模板，而无需更改html结构：

<div *ngFor="let tmpl of obj">

   <div *ngIf="tmpl.templateId == 1">
      {{ tmpl.name }}
   </div>

   <ng-container *ngTemplateOutlet="templateTwo; context: tmpl"></ng-container>
   <ng-container *ngTemplateOutlet="templateThree; context: tmpl"></ng-container>

</div>

<ng-template #templateTwo  let-id="templateId" let-name="name">
   <div *ngIf="id == 2">
        {{ name }}
   </div> 
</ng-template>

<ng-template #templateThree  let-id="templateId" let-name="name">
   <div *ngIf="id == 3">
        {{ name }}
   </div> 
</ng-template>

stackblitz.com上的示例代码

您还可以使用ngFor将ng-templates直接放在div内，只需使用在ngFor语句中声明的相同输入变量，如下所示：

  <div *ngFor="let tmpl of obj">

    <div *ngIf="tmpl.templateId == 1; else templateTwo">
        {{ tmpl.name }}
    </div>

    <ng-template #templateTwo >
      <div *ngIf="tmpl.templateId == 2; else templateThree; ">
          {{ tmpl.name }}
      </div>
    </ng-template>

    <ng-template #templateThree >
        <div *ngIf="tmpl.templateId == 3">
            {{ tmpl.name }}
        </div>
    </ng-template>

  </div>

Answer 2

如果我正确理解您的问题，并且如果您不想使用ng-template则可以这样编写：

<div *ngFor="let tmpl of obj">

    <div *ngIf="tmpl.templateId == 1">
        ...
    </div>

    <div *ngIf="tmpl.templateId == 2">
        ...
    </div>

    <div *ngIf="tmpl.templateId == 3">
        ...
    </div>

  </div>

Answer 3

对于那些将来可能会偶然发现它的人，我的建议是通过使用带有表达式（分配给*ngTemplateOutlet= ）的ng-container来解决它，该表达式使用 ng-template 的名称解析以用于当前对象的被迭代的数组。

<ng-template #templateOne let-tmpl="tmp">
  <div>
    {{ tmpl.name }}
  </div>
</ng-template>

<ng-template #templateTwo let-data="tmp">
  <div>
    {{ data.name }}
  </div>
</ng-template>

<ng-template #templateThree let-data="tmp">
  <div>
    {{ data.name }}
  </div>
</ng-template>

<div *ngFor="let tmpl of obj">
  <ng-container *ngTemplateOutlet="tmpl.templateId == 1 ? templateOne :
    tmpl.templateId == 2 ? templateTwo : templateThree; context: {tmp: tmpl}"></ng-container>
</div>