如何在以两种方式绑定显示之前从“ngModel”编辑数据答案

【问题标题】：how to edit the data from "ngModel" before display in two way binding如何在以两种方式绑定显示之前从“ngModel”编辑数据
【发布时间】：2020-11-16 22:16:53
【问题描述】：

    <textarea #hello class="form-control" name="Input" type="text" rows="10" cols="40" [(ngModel)]="answer">
    </textarea>
    
    <div class="message">
      {{ answer }}
    </div>

    transform(value: string): string {
        return value.replace(/\\n/g, '<br />');
      }
    answer = '';

我的要求是我需要从用户那里获取一些数据，将其存储在一个变量中，进行一些更改/替换一些东西，保留它的状态（换行符、空格）然后显示它。

我可以在显示之前截取来自ngModel的数据并将其存储在变量中，进行更改然后将其显示为正常的ngModel

如果无法做到这一点，请感谢通过任何其他方法满足此要求的任何帮助。需要一些指导

【问题讨论】：

创建两个变量，使第二个变量接收您的格式化数据。 Anothe_var = value.replace(/\\n/g, '
');。 {{Another_var}}
嗨，我卡住了，如何将输入 ngModel 形式的数据传输到变量，任何示例或参考都会对我有帮助。基本上，如何将数据从 html 传输到 ts :(
你自己的例子已经在做 ir，一旦你使用了双向绑定。[(ngModel)]="answer"。只要您键入，您就会将数据传输到“answer”变量。
angular.io/guide/binding-syntax
是的，但是你不能对它做任何操作，它是实时的。如果我将“答案”复制到“另一个变量”，它将不起作用。如果我的消息是“你好，你好吗”，我需要将其编辑为“嗨，你好吗”然后显示它，我可以这样做吗？如果我听起来很愚蠢，我很抱歉，是否可以提供一些相同的小代码

标签： angular typescript angular-ngmodel

【解决方案1】：

<textarea #hello class="form-control" name="Input" type="text" 
 rows="10" cols="40" [(ngModel)]="answer" (keyup) 
  ="onKeyUp($event)">
  </textarea>

  <div class="message">
 {{ formated }}
  </div>

打字稿

onKeyUp(event: any)
{
This.formated = event.target.value.replace(/\\n/g, '<br />');
 }
 answer = '';
 formated: string

【讨论】：

哇！谢谢它的工作。一个后续问题，请多吃点时间。我可以按以下方式进行多次编辑code onKeyUp(event: any) { this.formated = event.target.value.replace(/\\n/g, '
'); this.formated = event.target.value.replace("hello","hi") this.formated = event.target.value.replace("what","wassup?") this.formated = event.target.value .replace("1","2") } code
是的，但是像这样。 this.formated = = event.target.value.replace(/\\n/g, '
'); this.formated = this formated.replace("hello","hi") this.formated = this.formated.replace("what","wassup?") 。我现在无法测试，但我想这可以完成这项工作。