代码之家 › 专栏 › 技术社区 › Display Name Camilo Terevinto

如何通过*ngIf将数据传递给模板参数?

angular

0

Display Name Camilo Terevinto · 技术社区 · 4 年前

我们能通过吗 [1,2,3] 到参数 p 的模板 A 然后通过 [4,5,6] 到参数 q 的模板 B 从…起 *ngIf ?

<div *ngIf="true;then A;else B"></div>

<ng-template #A let-p>p: {{p}}</ng-template>
<ng-template #B let-q>q: {{q}}</ng-template>

这是我的尝试,但不起作用。

<div *ngIf="true;then A; context:{$implicit:[1,2,3]};else B;context:{$implicit:[4,5,6]}"></div>

<ng-template #A let-p>p: {{p}}</ng-template>
<ng-template #B let-q>q: {{q}}</ng-template>

1 回复 | 直到 4 年前

1

3

Yong Shun 4 年前

我认为 仅有一个的 三元运算符很难满足您的要求。

方法1:使用 [ngSwitch] + [ngTemplateOutlet]

<div [ngSwitch]="true">
  <ng-container
    *ngSwitchCase="true"
    [ngTemplateOutlet]="A"
    [ngTemplateOutletContext]="{ $implicit: [1, 2, 3] }"
  >
  </ng-container>

  <ng-container
    *ngSwitchDefault
    [ngTemplateOutlet]="B"
    [ngTemplateOutletContext]="{ $implicit: [4, 5, 6] }"
  >
  </ng-container>
</div>

方法2:使用 [ngTemplateOutlet] 和多个三元运算符

<div>
  <ng-container
    [ngTemplateOutlet]="true ? A : B"
    [ngTemplateOutletContext]="{ $implicit: true ? [1, 2, 3] : [4, 5, 6] }"
  >
  </ng-container>
</div>

Demo Apprach 1 & 2 @ StackBlitz