问题描述: 在Angular 6中,ngModel在AppComponent中没有改变值。
解决方法:
确保在使用ngModel之前已经导入了FormsModule。在app.module.ts文件中添加以下代码:
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
//...
})
export class AppModule { }
在AppComponent中,确保使用了双向绑定语法[(ngModel)]并且与一个变量绑定。例如:
在AppComponent类中,确保已经定义了myVariable属性,并且可以进行修改。例如:
export class AppComponent {
myVariable: string;
//...
}
如果在子组件中使用ngModel,并且希望将其更改的值传递回AppComponent,则可以使用@Output装饰器和EventEmitter来实现。首先,在子组件中定义一个@Output属性,并创建一个EventEmitter实例。在子组件中更改ngModel的值时,触发该事件。然后,在AppComponent中监听该事件并处理传递的值。例如: 子组件:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`
})
export class ChildComponent {
@Output() valueChange = new EventEmitter();
childValue: string;
onChildValueChange() {
this.valueChange.emit(this.childValue);
}
}
AppComponent:
export class AppComponent {
myVariable: string;
onChildValueChange(value: string) {
this.myVariable = value;
}
}
通过以上步骤,应该能够在AppComponent中正确地改变ngModel的值。