如何在Angular网页中获取控制台输出？

Question

我有一个使用Angular作为前端的Django项目。我有一个按钮，点击它是扫描数据库中的表。我有一些打印语句views.py文件，它在集成开发环境控制台中不断地打印扫描的结果。我想把这些输出放到网页上。我希望在前端实时打印控制台输出。有人知道我是如何做到这一点的吗？

Answer 1

您可以通过使用服务器发送的事件来实现此目的。python可以将这些控制台日志推送到前端。我不是python专家，所以在下面给出了一个如何将服务器端事件从python发送到前端的链接

https://medium.com/code-zen/python-generator-and-html-server-sent-events-3cdf14140e56

在前端，你可以监听暴露的url，一旦服务器推送这个流上的任何消息，前端就可以接收它，并将它推入组件的数组中，并可以通过ui显示。

对于前端代码，我在下面给出一个最小的例子：

import { Injectable, NgZone } from "@angular/core";
import { Observable } from "rxjs";
@Injectable({
  providedIn: "root"
})
export class SseService {
  constructor(private _zone: NgZone) {}
  getServerSentEvent(url: string): Observable<any> {
    return Observable.create(observer => {
      const eventSource = this.getEventSource(url);
      eventSource.onmessage = event => {
        this._zone.run(() => {
          observer.next(event);
        });
      };
      eventSource.onerror = error => {
        this._zone.run(() => {
          observer.error(error);
        });
      };
    });
  }
  private getEventSource(url: string): EventSource {
    return new EventSource(url);
  }
}

您可以通过上述方式登录getServerSentEvent，并能不断收到新的消息，在您的情况下是您的控制台日志。

Answer 2

您可以尝试使用需要显示的信息调用以下函数。

addItem(val:any) {
   let node = document.createElement("li")
   let textnode = document.createTextNode(val)
   node.appendChild(textnode)
   document.getElementById("output").appendChild(node) 
}

确保有一个输出为“id=”的元素。