Я новичок в angular, и мой сэр дал мне упражнение по получению данных поля ввода в элементе p, нажав кнопку с использованием angular 7. Я делаю так много попыток, используя некоторые функции (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 =
    }
}
0
Hammad Ur Rehman 12 Ноя 2019 в 13:26
 – 
Haem
12 Ноя 2019 в 13:33

2 ответа

Попробуйте вот так:

Рабочая демонстрация < / сильный>

.html

<input type="text" [(ngModel)]="name" name="name">
<br>
<br>
<button (click)="show = true">Show</button>
<p *ngIf="show">{{name}}</p>
0
Adrita Sharma 12 Ноя 2019 в 13:29
В этом примере данные удаляются, затем я нажимаю клавишу Backspace, я думаю, это двусторонняя привязка данных. После нажатия на кнопку отправки данные вводятся и удаляются с обеих сторон.
 – 
Hammad Ur Rehman
12 Ноя 2019 в 14:38

Просто поместите входное значение во временную переменную и скопируйте его на экран при нажатии.

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>
0
Arcteezy 12 Ноя 2019 в 13:44