Angular 作为@Input传递给子级的值的双向绑定

我有两个组件：

父级

和

子级

。

子级

从

父级

接收一个

过滤器

类型为

@Input

过滤器

如下所示：

export class FilterModel {
    name: string;

    constructor(name: string){
        this.name = name;
    }
}

在

父级

模板中，我有以下内容（已在.ts文件中初始化

过滤器

）：

子项的
ngOnInit
中的
filter
值正常

  ngOnInit() {
    console.log(this.filter);  
  }

执行此操作时，我可以在
Child
模板中看到
filter
的值{‌{filter.name}}

执行此操作时，我可以看到输入中的值：

<input type="text" [(value)]="filter.name" > 

从'@angular/forms'导入{FormsModule}出现在所有
.module.ts

更新2

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { DirectivesModule } from '../../theme/directives/directives.module';
import { ChildComponent } from './myfolder/child.component';
import { ParentComponent } from './myfolder/parent.component';

export const routes = [
  { path: '', redirectTo: 'XXXXX', pathMatch: 'full'},
  { path: 'parent', component: ParentComponent, data: { breadcrumb: 'XXXXX' } }
];

@NgModule({
  imports: [
    CommonModule,
    NgxDatatableModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ParentComponent,
    ChildComponent
  ]
})
export class MyFolderModule { }

将
FormsModule
添加到
imports
数组中

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgxDatatableModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
 ...
)

ngModel是FormsModule中的一个指令，要使用该模块，您需要将其添加到NgModule的imports数组中，而不仅仅是将其导入到脚本中

@NgModule({
    imports: [
    CommonModule,
    FormsModule, // add this line
    NgxDatatableModule,
    DirectivesModule,
    RouterModule.forChild(routes)
    ],
)

我不是100%确定语法，但通常我看到模型绑定是
[（ngModel）]
而不是
[（value）]
@BenediktSchmidt这是我在使用[（value）]时说的，没关系，但当我使用[（ngModel）]时，我出现了一个错误。哦，是的，现在我明白了。我在自己设置的一个示例中成功地实现了它，应该没有任何问题，告诉我们在哪里导入FormsModule，以及模块的结构/app@JoshuaChan问题已更新
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';

import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { DirectivesModule } from '../../theme/directives/directives.module';
import { ChildComponent } from './myfolder/child.component';
import { ParentComponent } from './myfolder/parent.component';

export const routes = [
  { path: '', redirectTo: 'XXXXX', pathMatch: 'full'},
  { path: 'parent', component: ParentComponent, data: { breadcrumb: 'XXXXX' } }
];

@NgModule({
  imports: [
    CommonModule,
    NgxDatatableModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ParentComponent,
    ChildComponent
  ]
})
export class MyFolderModule { }

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgxDatatableModule,
    DirectivesModule,
    RouterModule.forChild(routes)
  ],
 ...
)

@NgModule({
    imports: [
    CommonModule,
    FormsModule, // add this line
    NgxDatatableModule,
    DirectivesModule,
    RouterModule.forChild(routes)
    ],
)