Angular 5自动更新字符串变量上的另一个变量更改 [英] Angular 5 auto update string variable on another variable change

问题描述

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

Is there a way to update a string variable when another variable changes? I have a string that is built by using various variables. I display that string in the component's html file using interpolation. However, if a variable changes that the string was using to build itself, the string will never change because they not mutable. Only way would be to reset the string again when one of the other variables change.

示例代码:

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以使用更改后的变量的值?

Of course, after five seconds, the string stays the same because I never reinitialized it. Is there a way to automatically detect if any of the variables being used inside myString change, then update myString to use the values of the changed variables?

谢谢，感谢您提供任何信息！

Thank you, any information is appreciated!

推荐答案

您可以使用BehaviorSubject(具有当前值"概念)进行操作.它存储了发给其使用者的最新值，并且每当有新的Observer订阅时，它将立即从BehaviorSubject接收当前值".

You can do that using BehaviorSubject, which has a notion of "the current value". It stores the latest value emitted to its consumers, and whenever a new Observer subscribes, it will immediately receive the "current value" from the BehaviorSubject.

为数量数据创建单独的服务.

Create separate service for amount data.

service.ts

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

component.ts

ChangeDetectorRef

ChangeDetectorRef

如果模型内有任何东西(这是什么意思， 您的班级)已更改，但未反映视图，您可能 需要通知Angular来检测那些更改(检测本地更改) 并更新视图.

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自动更新字符串变量上的另一个变量更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！