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

如何在Angular的模板中声明变量 更新资料

我们可以像这样创建指令

*ngIf

并调用它

*ngVar

ng-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>

原始答案

角v4

1）

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.ts

export 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>

正如@基思在评论中提到的

这在大多数情况下都可以使用，但这不是通用解决方案，因为它依赖于变量是否为真

有关其他方法，请参见更新。