猛跑小猪
这在大多数情况下都有效,但它不是一般的解决方案,因为它依赖于变量的真实性所以起源答案就像@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>