为模板中的变量赋值 - Angular7

Posted 2023-02-22

【中文标题】为模板中的变量赋值 - Angular7

【英文标题】：Assign a value to a variable in the template - 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 这不起作用，因为 仅用于打印输出

***.com/questions/48959117/…的可能重复

谢谢大家，正在检查是否可行

想通了。检查我的答案

【参考方案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) 元素中，无法从视图更新模型。

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