将组件中的数据绑定到服务返回视图 - Angular答案

【问题标题】：Binding data from component to view on service return - Angular将组件中的数据绑定到服务返回视图 - Angular
【发布时间】：2021-01-08 12:58:31
【问题描述】：

我正在使用 Angular 8，并且在我的组件文件 mycomponent.ts 中有一个名为 items 的变量，它绑定到我的 HTML，如下所示。

我的 HTML

<div cdkDropList [cdkDropListData]="items">
    <div *ngFor="let item of items" cdkDrag [cdkDragData]="item" (click)="onClick(item)">
    .......
    </div>
</div>

在该组件文件中，它还具有如下功能。

msgFrmServer(update) {
    this.items = update;
}

在一个服务文件myservice.ts我有下面的代码来调用这个函数。

myComponent.msgFrmServer(update);

我在组件 ts 文件中调用函数 msgFrmServer。

变量在方法内部没有问题地更新，但视图没有更新。这是一个 websocket 应用程序，我从服务器获取更新，每次有更新时服务类都会调用组件 ts 文件中的函数。

我可以在组件 ts 中移动服务类函数，然后一切正常。但这看起来是一个糟糕的设计理念。我想将我的服务分开并使其正常工作。有人可以帮我吗？我是 Angular 的新手，我可能缺少 Angular 中可以轻松处理这个问题的一些好功能。

【问题讨论】：

你能举个小例子吗？也许您需要等待数据完全加载然后在组件上添加一个 ngIf，即 *ngIf="dataLoaded"
@Sprep 我在来自我的应用程序的问题中添加了代码。它会更新很多次（每次服务器发送更新）。
@Sprep 还有问题是服务调用组件 ts 时数据绑定不起作用。因此，像“dataLoaded”这样的任何变量也不会在视图中更新。
您是否在组件中使用了 ngOnInit？

标签： angular typescript data-binding

【解决方案1】：

如果您使用 websocket，则可以使用 rxjs 在您的服务中构造 WebSocketSubject（如下面的 stackblitz 示例中的 my-test.service）。然后你可以在你的组件中订阅它。如果您的 websocket 收到新消息，则调用 subsription 中的下一个函数，然后您可以调用组件中所需的任何函数。

服务示例：

import { Injectable } from "@angular/core";
import { webSocket, WebSocketSubject } from "rxjs/webSocket";

@Injectable()
export class MyTestWebsocketService {
  myWebSocket: WebSocketSubject<any>;

  constructor() {
    this.myWebSocket = webSocket({
      url: "ws://xxxxx/"
    });
  }

  getWebSocket() {
    return this.myWebSocket;
  }
}

组件示例：

import { Component, OnInit } from "@angular/core";
import { MyTestService } from "../my-test.service";

@Component({
  selector: "app-my-component",
  templateUrl: "./my-component.component.html",
  styleUrls: ["./my-component.component.css"]
})
export class MyTestComponent implements OnInit {
  constructor(private myTestService: MyTestService) {}
  items: any;
  ngOnInit() {
    this.myTestService.getWebSocket().subscribe(
      msg => {
        this.msgFrmServer(msg);
      }, // Called whenever there is a message from the server.
      err => console.log(err), // Called if at any point WebSocket API signals some kind of error.
      () => console.log("complete") // Called when connection is closed (for whatever reason).
    );
  }

  msgFrmServer(update) {
    this.items = update;
  }
}

Stackblitz example

【讨论】：