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文件：

npm install --save stream timers

TS文件：

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

希望对您有帮助。

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

2 个答案:

ts

html