为模板中的变量赋值 - Angular7

Question

有两个切换按钮（编辑和提交），哪个按钮在点击时应该像切换 show/hide 样式一样工作

<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

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

这是一个简单的例子，说明如何做到这一点 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 2

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

Answer 3

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

Answer 4

想通了。 有点乱。但完美运行

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

Answer 5

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

字符串插值是一种单向数据绑定。在 one-way 数据绑定中，模型的值被插入到 HTML (DOM) 元素中，无法从视图更新模型。

希望给出link可能有助于理解。

为模板中的变量赋值 - Angular7

Assign a value to a variable in the template - Angular7

javascript

angular

variables

angular7

angular-template-variable