Необходимо отображать текст при нажатии кнопки - PullRequest
Новая
       29

Необходимо отображать текст при нажатии кнопки

0 голосов
/ 06 февраля 2019

Я работаю с первым англ. Js. Не знаю, где я делаю ошибку, но ниже приведен код, который я пытаюсь, но не работаю. 

I have tried to run the code it does render the html elements but doesn't do anthing.

<code>

<ul>
  <li *ngFor="let data of sampleData[0]"> {{ data.username }} </li>
</ul>

<input type="text" [(ngModel)]="textInput">
<button (click)="onClick(textInput)">Click me!</button>

<p>{{ displayValue }}</p>

</code>

Git url: https://github.com/Ramesh5688/angularTask

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

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

Шаблон: 

<ul>
  <li *ngFor="let data of sampleData[0]"> {{ data.username }} </li>
</ul>

<input type="text" [(ngModel)]="textInput">
<button>Click me!</button>

<p>{{textInput}}</p>

Будет хорошей практикой, если вы не используете sampleData[0] .Используйте sampleData, как я определил ниже.Если вы хотите отображать значение только при нажатии кнопки, вы можете проверить следующий код:

Шаблон: 

<ul>
  <li *ngFor="let data of sampleData"> {{ data.username }} </li>
</ul>

<input type="text" [(ngModel)]="textInput">
<button (click)="onClick()">Click me!</button>

<p>{{ displayValue }}</p>

Компонент: 

export class AppComponent implements OnInit {
  sampleData:any;
  textInput = '';
  displayValue: string;

  constructor (private _jsonService: JsonServiceService) {}

  ngOnInit() {
    this._jsonService.getData().subscribe((data) => {
      this.sampleData = data;
    });
  }

  onClick() {
    this.displayValue = this.textInput;
  }
}
0 голосов
/ 06 февраля 2019

Это слишком просто, просто свяжите переменную ngModel с тем местом, куда вы хотите показать 

<input type="text" [(ngModel)]="textInput">
<button (click)="displayValue=textInput">Click me!</button>
<p>{{ displayValue }}</p>

STACKBLITZ DEMO

...