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

【问题标题】：How to pass data to different templates using *ngFor and *ngIf Angular 4如何使用 *ngFor 和 *ngIf Angular 4 将数据传递给不同的模板
【发布时间】：2018-07-09 06:28:12
【问题描述】：

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

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 我想将数据传递给相应的模板，但我无法做到这一点，因为它在模板代码中抛出错误，我在这里做错了什么。

请告诉我正确的方法。

【问题讨论】：

请发布您遇到的错误？..
@Raghav 我收到相应的错误 无法绑定到“ngIfContext”，因为它不是“div”的已知属性
let-data="data" 是什么以及它的来源。你也可以发布data对象吗？？？？？？
如果条件不满足，我想将数据传递给模板。为了传递我用过的数据 let-data="data"

标签： javascript angular typescript

【解决方案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>

example code on 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>

【讨论】：

Hadi Golkarian，您的回答有效，但是，我们可以不使用 ng-templates 吗？因为我已经为每个不应该改变的划分设置了宽度。如果我使用 *ngIf 模板将动态加载

【解决方案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>

【讨论】：

【解决方案3】：

对于那些将来可能会偶然发现它的人，我的建议是使用ng-container 和一个表达式（分配给*ngTemplateOutlet=）来解决它，该表达式使用 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>

【讨论】：