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>

我试着运行代码，它确实呈现html元素，但没有做任何事情。


{{data.username}

点击我！
{{displayValue}}

---

Git url:

这太简单了，只需将

ngModel

变量绑定到您想要显示的任何位置

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

点击我！
{{displayValue}}

---

这太简单了，只需将

ngModel

变量绑定到您想要显示的任何位置即可

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

点击我！
{{displayValue}}

---

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

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

---

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

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

---

当我在文本框中输入时，它应该在任何标签（如）中显示，或者当我在文本框中输入时，它应该在任何标签（如）中显示，或者