我喜欢创建一个指令来做这件事的方法(很好的调用@yurzui)。

最后我在Medium上找到了一篇文章，Angular的“let”指令很好地解释了这个问题，并提出了一个自定义的let指令，它在我的用例中工作得很好，代码更改很少。

以下是要点(在发布时)和我的修改:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

interface LetContext <T> {
  appLet: T | null
}

@Directive({
  selector: '[appLet]',
})
export class LetDirective <T> {
  private _context: LetContext <T> = { appLet: null }

  constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef <LetContext <T> >) {
    _viewContainer.createEmbeddedView(_templateRef, this._context)
  }

  @Input()
  set appLet(value: T) {
    this._context.appLet = value
  }
}

我的主要改变是:

将前缀从'ng'更改为'app'(你应该使用你的应用程序的自定义前缀是什么) 将appLet: T更改为appLet: T | null

不知道为什么Angular团队还没有发布一个官方的ngLet指令。

原始源代码归功于@AustinMatherne

丑,但是:

<div *ngFor="let a of [aVariable]">
  <span>{{a}}</span>
</div>

当与async管道一起使用时:

<div *ngFor="let a of [aVariable | async]">
  <span>{{a.prop1}}</span>
  <span>{{a.prop2}}</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>

or

<div *ngVar="false; let variable">
    <span>{{variable | json}}</span>
</div>

or

<div *ngVar="45 as variable">
    <span>{{variable | json}}</span>
</div>

or

<div *ngVar="{ x: 4 } as variable">
    <span>{{variable | json}}</span>
</div>

Angular4 ngVar

另请参阅

Angular 4在哪里为*ngIf定义了“as local-var”行为?

原来的答案

角v4

div + ngIf + let {{variable.a}} {{variable.b}} div + ngIf + as

view

<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;
}

如果你不想创建像div这样的包装器，你可以使用ng-container

view

<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在评论中提到的

这将在大多数情况下工作，但它不是一个普遍的解决方案，因为它 依赖于变量为真

有关另一种方法，请参阅update。

一个简单的解决方案可以满足我的需求:

 <ng-container *ngIf="lineItem.productType as variable">
       {{variable}}
 </ng-container>

OR

 <ng-container *ngIf="'ANY VALUE' as variable">
       {{variable}}
  </ng-container>

我使用的是Angular版本:12。这似乎也适用于其他版本。

我喜欢创建一个指令来做这件事的方法(很好的调用@yurzui)。

最后我在Medium上找到了一篇文章，Angular的“let”指令很好地解释了这个问题，并提出了一个自定义的let指令，它在我的用例中工作得很好，代码更改很少。

以下是要点(在发布时)和我的修改:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

interface LetContext <T> {
  appLet: T | null
}

@Directive({
  selector: '[appLet]',
})
export class LetDirective <T> {
  private _context: LetContext <T> = { appLet: null }

  constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef <LetContext <T> >) {
    _viewContainer.createEmbeddedView(_templateRef, this._context)
  }

  @Input()
  set appLet(value: T) {
    this._context.appLet = value
  }
}

我的主要改变是:

将前缀从'ng'更改为'app'(你应该使用你的应用程序的自定义前缀是什么) 将appLet: T更改为appLet: T | null

不知道为什么Angular团队还没有发布一个官方的ngLet指令。

原始源代码归功于@AustinMatherne

对某人有帮助的简短回答

模板引用变量经常引用DOM元素 模板。 也可以参考angular或web组件和指令。 这意味着您可以轻松地访问模板中的任何地方的变量

使用哈希符号(#)声明引用变量 是否能够将变量作为事件的参数传递

  show(lastName: HTMLInputElement){
    this.fullName = this.nameInputRef.nativeElement.value + ' ' + lastName.value;
    this.ctx.fullName = this.fullName;
  }

但是，你可以使用ViewChild装饰器在你的组件中引用它。

import {ViewChild, ElementRef} from '@angular/core';

在Component中引用firstNameInput变量

@ViewChild('firstNameInput') nameInputRef: ElementRef;

之后，你可以在组件中的任何地方使用this.nameInputRef。

使用ng-template

对于ng-template，略有不同，因为每个模板都有自己的一组输入变量。

https://stackblitz.com/edit/angular-2-template-reference-variable