我有以下模板：<div> <span>{{aVariable}}</span></div>并希望最終得到：<div "let a = aVariable"> <span>{{a}}</span></div>有辦法嗎？
3 回答
猛跑小豬
TA貢獻1858條經(jīng)驗 獲得超8個贊
這在大多數(shù)情況下都有效，但它不是一般的解決方案，因為它依賴于變量的真實性
所以起源答案就像@Keith所說。這是另一種方法。我們可以像創(chuàng)建指令一樣*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>
Plunker示例Angular4 ngVar
也可以看看
Angular 4在哪里為* ngIf定義“as local-var”行為？
起源
Angular 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你可以使用那樣創(chuàng)建包裝器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>
慕萊塢森
TA貢獻1810條經(jīng)驗 獲得超4個贊
丑陋，但是：
<div *ngFor="let a of [aVariable]">
<span>{{a}}</span>
</div>
與異步管道一起使用時：
<div *ngFor="let a of [aVariable | async]">
<span>{{a.prop1}}</span>
<span>{{a.prop2}}</span>
</div>
添加回答
舉報
0/150
提交
取消