angular - 通过单击按钮获取输入字段数据并在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>

app.component.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

只需将输入值放入临时变量中，然后在单击时将其复制到显示中。

app.component.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>