为模板中的变量赋值 - Angular7答案

【问题标题】：Assign a value to a variable in the template - Angular7为模板中的变量赋值 - Angular7
【发布时间】：2019-10-08 17:36:22
【问题描述】：

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

<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

【问题讨论】：

@Shubham 这不行，会报错。
@Shubham 这不起作用，因为{{ }} 仅用于打印输出
stackoverflow.com/questions/48959117/…的可能重复
谢谢大家，正在检查是否可行
想通了。检查我的答案

标签： javascript angular variables angular7 angular-template-variable

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

嗯，不是正式的，但你可以通过一些小技巧。

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

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

希望给出的链接可以帮助理解。

【讨论】：