Как получить значение textarea, отображаемое на основе выбора другого текста в угловых 6? - PullRequest
Новая
       17

Как получить значение textarea, отображаемое на основе выбора другого текста в угловых 6?

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

У меня есть основное поле textarea, куда я должен добавить один контент. У меня есть три других текстовых поля, где я буду отображать контент по умолчанию. Если пользователь щелкает контент в любом из этих трех полей textarea, этот контент должен отображаться в главном поле контента textarea. 

<div class="col-sm-8 col-md-5 col-lg-4">
      <textarea #content type="text" class="form-control">   </textarea>
    </div>
    <div class="col-sm-8 col-md-5 col-lg-4" (click)="setContent(content1.value)">
      <textarea #content1 type="text" name="content" [(ngModel)] = "content4" class="form-control" > Content 1 </textarea>
    </div>
    <div class="col-sm-8 col-md-5 col-lg-4">
      <textarea #content2 type="text" name="content5" [(ngModel)] = "content" class="form-control">Content 2
      </textarea>
    </div>
    <div class="col-sm-8 col-md-5 col-lg-4">
      <textarea #content3 type="text" name="content6" [(ngModel)] = "content" class="form-control"> content 3 </textarea>
    </div>

Как мне получить значение и отобразить его в основном контенте. Может кто-нибудь помочь мне с этим, пожалуйста?

1 Ответ

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

Вы можете сделать это разными способами. Вот один из них: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  mainContent = '';

  setContent(value) {
    this.mainContent = value;
  }

}

Вот ваш шаблон: 

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    [(ngModel)]="mainContent" 
    type="text" 
    class="form-control">
  </textarea>
</div>

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    #content1 
    type="text" 
    name="content" 
    class="form-control" 
    (click)="setContent(content1.value)">
    Value 1
  </textarea>
</div>

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    #content2 
    type="text" 
    name="content" 
    class="form-control" 
    (click)="setContent(content2.value)">
    Value 2
  </textarea>
</div>

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    #content3 
    type="text" 
    name="content" 
    class="form-control" 
    (click)="setContent(content3.value)">
    Value 3
  </textarea>
</div>

Вот StackBlitz для справки. Посмотрите на нижнюю часть шаблона, как я добавил в этом ответе.

...