时间戳

首页 > 解决方案 > 如何将新的文本行附加到角度2的文本区域

angular - 如何将新的文本行附加到角度2的文本区域

问题描述

我有一个服务来处理来自我的服务器的消息，并为它创建了一个 observable，如下所示：

serverMessage$: Observable<string>;
private serverMessageSubject: Subject<string>;

constructor() {
this.serverMessageSubject = new Subject<string>();
this.serverMessage$ = this.serverMessageSubject.asObservable();
}

setServermessage(message: string) {
    this.serverMessage = message;
    this.serverMessageSubject.next(this.serverMessage);
}

我在我的组件中等待这个字符串并将其添加到我的文本区域，如下所示：

.ts 文件

serverMessage: string;

constructor(
    private cs: CommonService
) {
    this.cs.serverMessage$.subscribe((message: string) => {
    this.serverMessage += message;
    });
  }

.html 文件

<div class="col-md-12" *ngIf="serverMessage">
    <textarea style="width: 100%" cols="50" rows="10">{{ serverMessage }}</textarea>
</div>

这是调用 setServermessage 的地方：

信号器服务.ts

onMessageReceived(serverMessage: string) {
    this.cs.setServermessage(serverMessage);
  }

问题是当我在我的文本区域中记录消息时，它会输出上一条消息和当前消息，从而使输出重复。我只想将新消息附加到我的文本区域中的旧消息中。我需要你的帮助。谢谢你。

标签： angular

解决方案

您的案例非常适合使用扫描运算符

您可以执行以下操作，而不是使用局部变量和连接字符串：

您的服务将保持原样。但是您会将组件逻辑更改为此


// serverMessage: string; No need anymore
serverMessage$: Observable<string>;
constructor(
    private cs: CommonService
) {
    this.serverMessage$ = this.cs.serverMessage$
    .pipe(scan((accumaltor, message) => accumator + message))
    // .subscribe((message: string) => {
      // this.serverMessage += message;

    // });
    // No need to subscribe anymore as we will be using the `async pipe`, but if you need `serverMessage` for something else
    // You can remove the comments and make it `=` not `+=` as the messages are already concatinated
  }

然后你可以在你的模板中做这样的事情


<!-- notice the async pipe here, remove the need to unsubscribe() at ngDestroy() -->
<div class="col-md-12" *ngIf="serverMessage$ | async as serverMessage">
    <textarea style="width: 100%" cols="50" rows="10">{{ serverMessage }}</textarea>
</div>

推荐阅读