Ошибка при добавлении динамического текста в HTML Angular5 - PullRequest
Новая
       23

Ошибка при добавлении динамического текста в HTML Angular5

0 голосов
/ 31 августа 2018

У меня возникает проблема при добавлении текста динамически, он заменяется. Вот мой код

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

Вместо того, чтобы добавлять его каждый раз заменяемое.

любая помощь?

Спасибо

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Здесь вам нужно * 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
  }
}

Надеюсь, это поможет вам.

0 голосов
/ 31 августа 2018

Вам нужно взять массив, если вы хотите более одного значения. Для этого нельзя использовать одну переменную.

Здесь я беру 2 переменные. msg переменная типа two-way, поэтому, когда пользователь вводит и сохраняет его, мы помещаем его значение в массив и легко очищаем его, а в HTML я использую ngFor, чтобы вы могли легко отображать значения массива

Вы можете попробовать действительно простой пример.

ц 

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