价值解决方案

Question

我正在使用angular7。只需创建一些文本框，然后提醒该文本框值即可。但是我无法获取打字稿中的值。请帮助我，如何进一步执行此步骤。

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

Answer 2

Angulars数据绑定不同于jQuery或纯JavaScript，并且无法使用input元素的“ name”属性来工作。请参阅Reactive Forms或Template driven Forms。

在您的示例中，可以应用模板驱动的表单。 Angular通过使用[(ngModel)]="name"将输入的值绑定到托管类的实例变量的值来工作。尽管不建议这样做，但是[和(引用了属性AND事件绑定（双向数据绑定）。进一步了解here。

要使用ngModel指令，您需要在各自的模块中包含FormsModule。

HTML代码：

<input matInput placeholder="Enter name" [(ngModel)]="name" >
<button (click)="lgbtnclick()" type="button" name="button"></button>

打字稿代码：

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

@Component({
  selector: 'app-about',
  styleUrls: ['about.component.css'],
  templateUrl: 'about.component.html',
})
export class AboutComponent {
  name: string="";

  constructor() { }

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

Answer 3

您好，您的html代码中的name属性实际上并未绑定到您的打字稿文件。它只是HTMLElement上的一个属性。如果您想要该值，实际上有很多选择。这里最简单的解决方案是将name变量附加到输入或good'ol ngModel的value属性上（确保在AppModule中导入ReactiveFormsModule和FormsModule）

价值解决方案

html

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

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);
  }
}

ngModel解决方案

html

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

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);
  }
}

我没有在打字稿angular7

3 个答案:

价值解决方案

html

ts

ngModel解决方案

html

ts