时间戳

首页 > 解决方案 > 角度绑定未更新

html - 角度绑定未更新

问题描述

我目前正在学习 Angular 2+，但无法理解绑定的工作原理。我已经用谷歌搜索了大约半小时，但还没有找到我丢失的东西。

我有一个带有简单按钮的页面，并且此按钮上的文本基于 bool 绑定到我的 TypeScript 中的一个属性。当我单击按钮时，它应该翻转布尔值，但我的 isTrackingText 属性没有改变。

这是我在 html 中的按钮：

<button ion-button block (click)="startTracking()">{{ isTrackingText }}</button>

这是我的 bool 和我的 TypeScript 中的绑定文本属性

isTracking: boolean = false;
isTrackingText: string = (!this.isTracking ? "Start Tracking" : "Stop Tracking");

最后是实际的点击事件：

startTracking() {
    console.log("Toggle Tracking!");
    this.isTracking = !this.isTracking;
}

更新：对不起，我应该提到我知道我可以在我的按钮单击事件中更改它，我的问题更多是如何通知我的 isTrackingText 它的支持字段已更改。

标签： htmlangulartypescript

解决方案

其他答案都显示了如何手动同步值，但另一种选择是使用 getter 而不是正确的字段：

isTracking: boolean = false;

get isTrackingText(): string {
    return !this.isTracking ? "Start Tracking" : "Stop Tracking";
}

这仍然可以从模板/其他代码中访问，就好像它是一个字段一样（即您不需要像函数一样调用它），并且模板将在更改检测运行时重新评估它。显然，与手动更新值相比，这有一点（我的意思是很少）开销，但便利因素可能会让它变得值得。

综上所述，如果您只在一个地方使用此逻辑，我强烈考虑将其放入模板本身，因为它纯粹是展示性的。不过，这只是我:)

推荐阅读