Question

有两个切换按钮（编辑和提交），该按钮的工作方式类似于单击时切换显示/隐藏样式

<button (click)="showEditBtn = false;" *ngIf="showEditBtn;"> Edit</button>
<button (click)="showEditBtn =  true;" *ngIf="!showEditBtn;">Submit</button>

我需要showEditBtn变量默认为true，而无需触摸脚本文件

是否可以为模板中的变量分配值，如下例所示？

<div> {{  let showEditBtn = true  }}  </div>

stackblitz example

Answer 1

您不能在插值{{ }}内部的变量中创建或设置值，插值仅用于打印输出（变量的值）。

Answer 2

已解决。 有点黑。但是效果很好

APIKEY

Answer 3

我强烈建议不要在模板中设置或更新变量。您所有的逻辑都应该在控制器中。

这是一个简单的例子 app.component.ts：

  public isEditMode: boolean;
  public toggleEditMode(): void {
      this.isEditMode = !this.isEditMode;
  }

app.component.html

<button (click)="toggleEditMode()" *ngIf="isEditMode;"> Edit</button>
<button (click)="toggleEditMode()" *ngIf="!isEditMode;">Submit</button>

Answer 4

Angular2 +中无法初始化模板中的变量值。您必须查看ngOnInit()函数。

Answer 5

Angular Interpolation是Angular中的一种数据绑定方法。并且它将允许用户在组件与其模板（视图）之间进行通信。

字符串插值是数据绑定的一种方式。在单向数据绑定中，将Model的值插入HTML（DOM）元素中，并且无法从视图中更新Model。

希望给出的链接可能有助于理解。

为模板中的变量分配值-Angular7

5 个答案: