[解決済み】Angularのテンプレートで変数を宣言する方法

質問

次のようなテンプレートがあります。

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

で終わらせたいと思います。

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

どうすればいいのでしょうか？

どのように解決するのですか？

更新情報

のようなディレクティブを作成すればよいのです。 *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

こちらもご覧ください

• Angular 4では、*ngIfの"as local-var"の動作はどこで定義されていますか？

オリジナルの回答

Angular v4

1. div + ngIf + let

   {{variable.a}} {{variable.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 が述べているように

これはほとんどの場合うまくいきますが、一般的な解決策ではありません。 変数が真実であることに依存する

別のアプローチについては、アップデートを参照してください。