☰

Angularのテンプレートで変数を宣言する方法 質問する

tag-icon • tag-icon html angular
Angularのテンプレートで変数を宣言する方法 質問する

次のテンプレートがあります:

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

そして最終的に次のようになることを望んでいます:

<div "let a = aVariable">
  <span>{{a}}</span>
</div>

それを実行する方法はありますか?

ベストアンサー1

アップデート

のようなディレクティブを作成して*ngIf呼び出すだけです*ngVar

ng-var.directive.ts

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
    @Input()
    set ngVar(context: unknown) {
        this.context.$implicit = this.context.ngVar = context;

        if (!this.hasView) {
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
            this.hasView = true;
        }
    }

    private context: {
        $implicit: unknown;
        ngVar: unknown;
    } = {
        $implicit: null,
        ngVar: null,
    };

    private hasView: boolean = false;

    constructor(
        private templateRef: TemplateRef<any>,
        private vcRef: ViewContainerRef
    ) {}
}

この*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>

プランカーの例 Angular4 ngVar

参照

元の回答

角度v4

  1. div+ ngIf+let

    {{変数a}} {{変数b}}

  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>

コンポーネント.ts

export class AppComponent {
  x = 5;
}
  1. ラッパーを作成したくない場合は、次のように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>

@Keithがコメントで述べたように

これはほとんどの場合に機能しますが、変数が真であることに依存するため、一般的な解決策ではありません。

別のアプローチについては更新を参照してください。

おすすめ記事