通过点击按钮获取输入字段数据，并在angular7中的p元素中获取按钮下的值答案

【问题标题】：Get input field data by clicking on the button and get value under the button in p element in angular7通过点击按钮获取输入字段数据，并在angular7中的p元素中获取按钮下的值
【发布时间】：2019-11-12 06:50:03
【问题描述】：

我是 Angular 的新手，我的先生给我练习，通过使用 Angular 7 单击按钮来获取 p 元素中的输入字段数据。我使用一些函数（onClick、onClickSubmit、myFunction）做了很多尝试，但我失败了在每一次尝试中。我认为我在数据绑定/事件绑定方面遇到了问题。请帮我解决这个问题。

app.component.html file

app.component.ts file

【问题讨论】：

您应该在输入元素上使用 [ngModel] 属性，有关更多信息，请尝试本教程angular.io/start
<input type="text" [(ngModel)]="name" name="name"><p>{{ name}}</p>
显示你迄今为止尝试过的内容
我已经编辑了我的帖子，现在再次查看并解决我的问题

标签： angular input input-field

【解决方案1】：

试试这样：

<input type="text" [(ngModel)]="name" name="name">
<br>
<br>
<button (click)="show = true">Show</button>
<p *ngIf="show">{{name}}</p>

【讨论】：

【解决方案2】：

对此有两种解决方案（您都可以找到here working link）。

动态更新：一旦您在文本框中输入，也应该在段落中反映出来。解决方案：这可以通过使用ngModel双向数据绑定来实现。在这种情况下没有按钮需要更新段落。
只有在您提交或点击按钮时，段落才应采用输入文本。

Check this link, you can play with it by changing code

希望这会有所帮助。祝一切顺利。继续学习。

【讨论】：