javascript - 为模板中的变量赋值 - Angular7

Question

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

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

我需要 的showEditBtn变量应该是true默认的而不接触脚本文件

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

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

堆栈闪电战示例

Answer 1

想通了。这有点骇人听闻。但完美运行

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

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

Answer 3

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

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

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

Answer 4

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

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

Angular2+ 中没有办法初始化模板中的变量值。您必须查看该ngOnInit()功能。