Angular 5 在另一个变量改变时自动更新字符串变量

Question

有没有办法在另一个变量改变时更新一个字符串变量？我有一个使用各种变量构建的字符串。我使用插值在组件的 html 文件中显示该字符串。但是，如果字符串用于构建自身的变量发生更改，则字符串将永远不会更改，因为它们不可变。唯一的方法是在其他变量之一发生变化时再次重置字符串。

示例ts代码：

import { Component} from '@angular/core';

@Component({
    selector: 'app-test-component',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})
export class TestComponent {

    myString = '';
    amount = 0;

    constructor() {
        this.myString = `Hello, you have ${this.amount} dollars.`;

        setTimeout(() => {
            this.amount = 40;
        }, 5000);
    }
}

示例 html 代码：

<p>{{ myString }}</p>

当然，五秒钟后，字符串保持不变，因为我从未重新初始化它。有没有办法自动检测 myString 中使用的任何变量是否发生变化，然后更新 myString 以使用已更改变量的值？

谢谢，如有任何信息，我们将不胜感激！

Answer 1

您可以使用 BehaviorSubject 来做到这一点，它具有 "the current value" 的概念。它存储发送给它的消费者的最新值，每当一个新的观察者订阅时，它会立即从 BehaviorSubject 接收到 "current value"。

为金额数据创建单独的服务。

service.ts

//set the initial value here
amount=new BehaviorSubject(0);

component.ts

ChangeDetectorRef

What it means if there is a case where any thing inside your model ( your class ) has changed but it hasn't reflected the view, you might need to notify Angular to detect those changes ( detect local changes) and update the view.

constructor(private ref: ChangeDetectorRef,subj:SubjectService) {
          subj.amount.subscribe((data)=>{
          this.amount=data;
          this.myString = `Hello, you have ${this.amount} dollars.`;
       //check for changes then it will update the view
          this.ref.markForCheck();  
          })
        setTimeout(() => {
          //change amount data after 1 second 
           subj.amount.next(40);          
        }, 1000);
       }

此处示例：https://stackblitz.com/edit/changedetection-using-subject?file=src%2Fapp%2Fapp.component.ts

Angular 5 在另一个变量改变时自动更新字符串变量

Angular 5 auto update string variable on another variable change

string

interpolation

angular

angular5