点击按钮获取输入字段数据，并获取angular7中p元素的值

Question

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

app.component.html：

<input type="text" [(ngModel)]="name" name="name">
<br><br>
<button (Click)="onClick">Show</button>
<p>{{name}}</p>

应用程序组件.ts：

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular7-app';
show(){
this.show =
}
}

Answer 1

这样尝试：

工作演示

.html

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

Answer 2

只需将输入值输入到一个临时变量中，并在单击时将其复制到显示中。

应用程序组件.ts：

tempName : string = '';  // Temp variable to hold input
origName : string = '';  // Name to be displayed

app.component.html：

<input type="text" [(ngModel)]="tempName" name="name">
<button (click)="origName=tempName">Show</button>
<p *ngIf="origName!=''">{{origName}}</p>