在 html Angular5 中添加动态文本时出错

Question

我在动态添加一些文本时遇到问题，它被替换了。这是我的代码

在 html 文件中

<textarea #messageInput></textarea>
<a href="javascript:void(0)" (click)="sendMessage(messageInput.value)"></a>

在ts文件中

export class className{

 flag :boolean=false;

   newMessage: any;

  sendMessage(msg:any) {

   this.flag=true

   this.newMessage=msg

 }

get flagVar(){
  return this.flag
}

}

在同一组件 html 文件中，我试图显示为

<div *ngIf='flagVar'>
<label  [hidden]="!forwardOption">
      <input type="checkbox" name="test" >  
 </label>
  {{msg}}
</div>

而不是每次都添加它的替换。

有什么帮助吗？

谢谢

Answer 1

如果你想要一个以上的值，你需要使用数组。您不能为此使用单个变量。

这里我取2个变量。 msg 这是一种 two-way 类型的变量，因此当用户键入并保存它时，我们将其值推送到数组中并轻松将其设为空白，而在 HTML 中我使用的是 ngFor 这样您就可以轻松显示数组

的值

你可以试试这个非常简单的例子。

ts

newMessage = [];
msg = '';
sendMessage() {
    this.newMessage.push(this.msg)
    this.msg='';
}

html

<textarea [(ngModel)]="msg"></textarea>
<a href="javascript:void(0)" (click)="sendMessage()">Click Here</a>


<p *ngFor="let m of newMessage">
  {{m}}
</p>

Answer 2

这里你需要一个 *ngFor 来重复你的消息。您需要更改的代码：

这是在线的DEMO

HTML 文件：

<textarea #messageInput></textarea>
<a href="javascript:void(0)" (click)="sendMessage(messageInput.value); messageInput.value = ''">Add Message</a>

<div *ngIf="mesasgeList.length > 0">
  <div *ngFor="let msg of mesasgeList">
    <label [hidden]="!forwardOption">
      <input type="checkbox" name="test" >  
 </label> {{msg}}
</div>
</div>

TS 文件：

export class AppClass {
flag: boolean = false;
  forwardOption: boolean;
  mesasgeList = [];
  sendMessage(msg: any) {

    this.flag = true;
    this.forwardOption = true;
    this.mesasgeList.push(msg);

  }

  get flagVar() {
    return this.flag
  }
}

希望对你有所帮助。

在 html Angular5 中添加动态文本时出错

Error while adding dynamic text in html Angular5

dynamic-html

typescript

angular

angular5

ts

html