Question

我基本上有一个按钮，一旦按下就会输出输入到用户输入中的内容。

然而，由于某些奇怪的原因，我的函数将用户输入分配给变量？

app.component.html：

<div style="text-align:center">
<h1>Word Hider</h1>
 <p></p>
   <input type="text" class="wordHide" value="Insert Text">
 <p></p>
   <button  id='userIn' (click)='takeUserStr()'>Submit!</button>
<p></p>
   <button>Hide Word!</button>
<div>
  Your Word Is: {{ userWord }}
</div>
</div>

app.module.ts：

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule, OnInit } from '@angular/core';


import { AppComponent } from './app.component';


  @NgModule({
     declarations: [
     AppComponent,
   ],
 imports: [
  BrowserModule
  ],
 providers: [],
 bootstrap: [AppComponent]
  })
export class AppModule {
userWord = 'this is a test';
  ********************function***********************
  takeUserStr(event: any) {
    this.userWord = (<HTMLInputElement>event.target).value;
  }

}

Answer 1

您需要在app.component.ts中声明函数，也不应该使用 HTML

中定义的任何参数

takeUserStr() {
    this.userWord = (<HTMLInputElement>event.target).value;
}

Answer 2

组件本质上是孤立的，它们只能理解context（this）中存在的内容，无论你在自己的类中保留什么。除此之外，它还会识别Input + Output绑定+ Injectors

您已将功能保留在AppModule中，而您的组件template无法访问该功能。您应该将function移出app.component.ts

基本上所有与你的组件html有关的东西，你必须在app.component.ts内移动

@Component({...})
export class AppComponent {
  userWord = 'this is a test';

  takeUserStr(event: any) {
     this.userWord = (<HTMLInputElement>event.target).value;
  }
}

还将$event对象传递给takeUserStr函数的参数。

(click)='takeUserStr($event)'

虽然我建议使用@angular/forms实现此方案，无论是模型驱动还是模板驱动表单。

检查Use ngModel with Angular

Angular项目中无法识别功能

2 个答案: