无法在单一页面应用程序 (Angular) 中显示多个组件

Question

我正在尝试开发一个基本网站，我必须在其中显示从 MQTT 主题接收到的数据（仪表板）。我无法显示第二个组件，它是一个应该显示从 MQTT 代理接收到的数据的仪表。我不知道如何将此图形插件连接到代理。

我已经尝试通过开发一个仅显示仪表元素的新独立应用程序来解决问题。 我发现了不同类型的仪表库。

App.component.html：

 Speed: {{value}}
  app-gauge /app-gauge

Gauge.component.ts

export class GaugeComponent implements OnInit {
  public value$: Observable<number>;
  ngOnInit() {
    this.value$ = interval(1000).pipe(
      map(() => Math.random() * 120)
    );

仪表应该出现并开始生成/显示随机数（链接到我遵循的指南：http://www.wayneparrott.com/add-a-realtime-gauge-to-your-angular-project/）

Answer 1

根据您的 cmets，您的组件似乎正在显示，但您的 html 中的 value 没有改变。这样做的原因是因为您使用Observable 在每 1 秒后发出随机值，因此为了使其正常工作，您需要订阅 Observable，在本例中为 value$。您可以使用async 管道订阅它。

您还需要更改一些代码。您在gauge.component.ts 中定义了您的Observable，但您在app.component.html 中访问它

将您的代码从 guage.component.ts 移动到 app.component.ts

您的app.component.ts 应如下所示：

export class AppComponent implements OnInit {
  public value$: Observable<number>;
  ngOnInit() {
    this.value$ = interval(1000).pipe(
      map(() => Math.random() * 120)
    );

现在将您的 app.component.html 更改为以下内容：

Speed: {{ value$ | async }}
  <app-gauge> </app-gauge>