angular - 我没有在 typescript angular7 中获取文本框值

Question

我正在使用 angular7。只需制作一些文本框，然后提醒该文本框值。但我无法获得 typescript 中的值。请帮助我如何继续这一步。

about.component.html

<input type="text" name="username">
<button (click)="lgbtnclick()" type="button" name="button"></button>

about.component.ts

  import { Component, OnInit } from '@angular/core';
  @Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
  })

  export class AboutComponent implements OnInit {
   name : string;

   constructor() { }

   ngOnInit() {
   }

   lgbtnclick(){
      alert(this.name)
      console.log(Error)
   }
}

警告信息:

undefined

Answer 1

将 name 属性的默认值设置为 "" 并使用 [(ngModel)]="name" 作为输入类型

HTML代码:

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Enter name" [(ngModel)]="name" >
  </mat-form-field>

  <button (click)="lgbtnclick()" type="button" name="button">Test</button>

TS代码:

import { Component } from '@angular/core';

@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
  name: string="";

  constructor() { }

  ngOnInit() {
  }

  lgbtnclick() {
    alert(this.name)
    console.log(Error)
  }
}

Stackblitz