Angular如何从函数取回值

Question

我对angular非常陌生，并且正在尝试通过函数从html中显示的按钮获取值。 按钮布局为：

`<button class="btn" id="btn-gold"   (click)="value(9)"              
name="mybutton" value="9">`
9

我也在html文件中调用该函数，如下所示：{{value（）}}。

这是我在.ts文件中的设置：

public value(a) { console.log(a); return a; }

很遗憾，我无法在html文件中显示任何值。我可以在控制台中看到这个：

• 7
• scoring.component.ts：18未定义
• scoring.component.ts：18未定义

现在问这个问题。为什么我无法在我的.html文件中看到该值，因为我可以在控制台中看到该数字，其次为什么我也每次点击都会获得两个未定义的值：/

长毛 ArcherMark

Answer 1

在TypeScript中具有属性值

arr

并具有设置值的功能

value: number;

现在您可以使用模板中的按钮设置值

setValue(value: number) {
  this.value = value;
}

并使用模板绑定显示值

<button class="btn" id="btn-gold" (click)="setValue(9)" name="mybutton" value="9">

Answer 2

如果您执行类似{{value（）}}的操作，那么您将调用的方法不是属性，因此angular在每次检查更改时都会评估该表达式，这与DoCheck生命周期挂钩相关联，这就是控制台日志的原因打印值的2倍，

解决方案是将值转换为属性，并具有getter和setter并使用两种方式进行数据绑定。