Angular报错：属性不存在于AppComponent类型，求实时同步输入内容方案

报错原因 #

你将onKeyUp方法定义在了AppComponent类的外部，Angular组件的所有属性和方法必须放在类的大括号内部，否则模板无法识别该方法，从而抛出“属性不存在于类型'appcomponent'上”的错误。

修复后的代码 #

组件类（app.component.ts） #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular';

  // 将方法移至类内部
  onKeyUp(newTitle: string) {
    this.title = newTitle;
  }
}

模板（app.component.html） #

<h1>{{title}}</h1>
<input type="text" (keyup)="onKeyUp(inputTitle.value)" [value]="title" #inputTitle>

更简洁的实现方式（双向绑定） #

Angular提供的[(ngModel)]双向绑定语法，能更高效地实现输入框与页面标题的实时同步，无需手动编写keyup事件处理逻辑：

步骤1：导入FormsModule #

在app.module.ts中导入FormsModule（双向绑定依赖该模块）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2：简化模板代码 #

<h1>{{title}}</h1>
<input type="text" [(ngModel)]="title">

输入框内容会自动同步到title属性，页面标题也会实时更新，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Chaitanya G.