Question

我需要在两个不同的地方重复相同的代码。和profile2是数组。我想重复相同的html代码而不重复它们

   profile1 = [{name : 'mr.A1',age : 25  },
                {name : 'mr.B1',age : 23}];
   profile2 = [{name : 'mr.A2',age : 25  },
                {name : 'mr.B2',age : 23}];


      <ng-container *ngFor="let x of profile1">
      <ng-template #templateRef>
       <p> {{x.name}}</p>
      <p> {{x.age}}</p>
      </ng-template>
      <ng-template [ngTemplateOutlet]="templateRef"></ng-template>
      </ng-container>

     // above code shows the result
      mr.A1
      25
      mr.B1
      23

      // below code shows nothing

    <ng-container *ngFor="let x of profile2">
     <ng-template [ngTemplateOutlet]="templateRef"></ng-template>
    </ng-container>

    // i want following results using ngTemplateOutlet
      mr.A2
      25
      mr.B2
      23

Answer 1

这种动态行为最适合自定义组件。

但是，如果您想采用这种方式，请知道必须使用ngTemplateOutletContext将数据发送到模板引用。

这是这样完成的：

<ng-template #profile let-person>
  <div>
    {{ person?.name }} is {{ person?.age }} years old.
  </div>
</ng-template>

<h1>First batch</h1>

<ng-container *ngFor="let person of profiles">
  <ng-container *ngTemplateOutlet="profile; context: { $implicit: person }"></ng-container>
</ng-container>

<h1>Second batch</h1>

<ng-container *ngFor="let person of profiles">
  <ng-container *ngTemplateOutlet="profile; context: { $implicit: person }"></ng-container>
</ng-container>

Stackblitz-Documentation

ngtemplateoutlet位于两个不同的循环中

1 个答案: