Angular 变量改变时组件不刷新

Question

我希望这不是一个重复的问题......我整晚都在寻找解决方案。
我正在为大学编写一个项目，他们希望我编写一种数据监视器，显示来自另一个应用程序的数据。
我们必须使用 rust，所以我想我可以使用 Tauri 来简化 UI 工作。
我面临的问题如下：从 angular 我使用listen方法将回调注册到add_data事件。 从那里我用从事件中收到的值更新一个属性。
前端只显示该元素，但是当它更新时，前端没有任何反应这是我的代码：

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    title = 'trader-visualizer-tauri-2';

    out: string = "out";

    ngOnInit(): void {
        listen('add_data', (event: TauriEvent<number>) => {
            console.log("add_data event received");
            this.out = event.payload.toString();
        })
    }
}

<main>
    {{out}}
</main>

有没有办法强制重新渲染组件？

Answer 1

我猜listen是来自您正在使用的 JS 库的 function。 当使用此类函数并从其回调内部更新您的属性时， Angular 不知道值已更改，这就是您需要通知 Angular 以检测更改的原因。

这很容易做到。 在构造函数和listen的底部注入ChangeDetectorRef ，调用其 cdRef 的detectChanges方法。

// Inject ChangeDetectorRef
constructor(private cdRef: ChangeDetectorRef) {}

...

ngOnInit() {
  listen('add_data', (event: TauriEvent<number>) => {
    console.log("add_data event received");
    this.out = event.payload.toString();

    // And add the following
    this.cdRef.detectChanges();
  })
}

要了解有关 Angular 变化检测的更多信息，请参阅以下资源： https://indepth.dev/posts/1058/a-gentle-introduction-into-change-detection-in-angular