我的建议是:https://medium.com/@AustinMatherne/ angular-let-direcy-a168d4248138

这个指令允许你这样写:

<div *ngLet="'myVal' as myVar">
  <span> {{ myVar }} </span>
</div>

我的建议是:https://medium.com/@AustinMatherne/ angular-let-direcy-a168d4248138

这个指令允许你这样写:

<div *ngLet="'myVal' as myVar">
  <span> {{ myVar }} </span>
</div>

丑,但是:

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

在Angular 12中:

  <div *ngIf="error$ | async as error">
     <span class="text-warn">{{error.message}}</span>
   </div>

如果你想要得到函数的响应并将其设置为变量，你可以像下面这样在模板中使用它，使用ng-container来避免修改模板。

<ng-container *ngIf="methodName(parameters) as respObject">
  {{respObject.name}}
</ng-container>

组件中的方法可以是

methodName(parameters: any): any {
  return {name: 'Test name'};
}

对某人有帮助的简短回答

模板引用变量经常引用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