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>

example code on stackblitz.com

您还可以将ng-templates与ngFor直接放在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>

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

2 个答案: