Question

我首先在工作Angular 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网址：https://github.com/Ramesh5688/angularTask

Answer 1

这太简单了，只需将 ngModel 变量绑定到您想显示的任何地方

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

STACKBLITZ DEMO

Answer 2

如果只想显示在输入字段中输入的值，则可以直接绑定该 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;
  }
}

单击按钮时需要显示文本

2 个答案: