如何在Angular中声明模板中的变量

Question

我有以下模板：

<div>

  <span>{{aVariable}}</span>

</div>

并希望最终得到：

<div "let a = aVariable">

  <span>{{a}}</span>

</div>

有办法吗？

Answer 1

这在大多数情况下都有效，但它不是一般的解决方案，因为它依赖于变量的真实性所以起源答案就像@Keith所说。这是另一种方法。我们可以像创建指令一样*ngIf调用它*ngVarNG-var.directive.ts@Directive({    selector: '[ngVar]',})export class VarDirective {  @Input()  set ngVar(context: any) {    this.context.$implicit = this.context.ngVar = context;    this.updateView();  }  context: any = {};  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}  updateView() {    this.vcRef.clear();    this.vcRef.createEmbeddedView(this.templateRef, this.context);  }}使用此*ngVar指令，我们可以使用以下内容<div *ngVar="false as variable">      <span>{{variable | json}}</span></div>要么<div *ngVar="false; let variable">    <span>{{variable | json}}</span></div>要么<div *ngVar="45 as variable">    <span>{{variable | json}}</span></div>要么<div *ngVar="{ x: 4 } as variable">    <span>{{variable | json}}</span></div>Plunker示例Angular4 ngVar也可以看看Angular 4在哪里为* ngIf定义“as local-var”行为？起源Angular v41）div+ ngIf+let<div *ngIf="{ a: 1, b: 2 }; let variable">  <span>{{variable.a}}</span>  <span>{{variable.b}}</span></div>2）div+ ngIf+as视图<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">  <span>{{variable.a}}</span>  <span>{{variable.b}}</span>  <span>{{variable.c}}</span></div>component.tsexport class AppComponent {  x = 5;}3）如果你不想像div你可以使用那样创建包装器ng-container视图<ng-container *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">  <span>{{variable.a}}</span>  <span>{{variable.b}}</span>  <span>{{variable.c}}</span></ng-container>

Answer 2

丑陋，但是：<div *ngFor="let a of [aVariable]">&nbsp; <span>{{a}}</span></div>与异步管道一起使用时：<div *ngFor="let a of [aVariable | async]">&nbsp; <span>{{a.prop1}}</span>&nbsp; <span>{{a.prop2}}</span></div>