Angular双向绑定报错：属性与事件未绑定到同一目标原因排查

开发者阿泽

2026-8-15

报错原因及解决方法

报错核心原因

Angular双向绑定的[(属性名)]语法有严格命名规则：必须配套一个名为属性名Change的@Output事件发射器。你的代码存在以下不匹配：

子组件输入属性是namex
但输出事件命名为additem，并非namexChange

Angular无法将[(namex)]与additem事件关联，因此抛出「双向绑定的属性和事件未绑定到同一目标」的错误。

代码修改步骤

修正子组件@Output命名
将输出事件名改为namexChange，匹配输入属性的命名规则：

@Input() namex: string = "";
@Output() namexChange = new EventEmitter<string>(); // 改为namexChange

调整子组件事件触发逻辑
子组件的addNewItem方法需触发namexChange事件，替换原有的additem：

addNewItem(value: string) {
  this.namexChange.emit(value); // 触发namexChange事件
}

响应式表单同步处理（可选）
由于你使用了formControlName="name"，需确保表单控件值与namex同步。可在子组件中监听表单控件变化：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html'
})
export class GeneralComponent implements OnInit {
  @Input() namex: string = "";
  @Output() namexChange = new EventEmitter<string>();
  
  form = new FormGroup({
    name: new FormControl('')
  });

  ngOnInit() {
    // 初始化时同步namex到表单控件
    this.form.get('name')?.setValue(this.namex);
    // 监听表单变化，触发双向绑定事件
    this.form.get('name')?.valueChanges.subscribe(value => {
      this.namexChange.emit(value);
    });
  }
}