如何在角度2的文本區域中添加新行文本

Question

我有一個處理來自服務器的消息並為其創建可觀察項的服務，如下所示：

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);
}

我正在組件中等待此字符串，並將其添加到我的textarea中，如下所示：

.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的調用位置：

signalr.service.ts

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

問題是，當我在文本區域中記錄消息時，它會輸出前一條消息和當前消息，從而使輸出重復。 我只想將新消息附加到我的textarea中的舊消息上。 我需要你的幫助。 謝謝。

Answer 1

您的案例是使用掃描運算符的理想之選

除了使用局部變量和隱藏字符串，您可以執行以下操作：

您的服務將保持原樣。 但您將組件邏輯更改為此

// 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>