带有@input属性的Angular 7双向绑定

Posted 2023-02-22

我有一个子组件，它使用@Input指令从父组件获取属性值。问题是双向数据绑定似乎不适用于此输入属性。任何想法可能是什么原因？

子组件类

@Component(
  selector: 'app-edit-property',
  templateUrl: './edit-property.component.html',
  styleUrls: ['./edit-property.component.css']
)
export class EditPropertyComponent implements OnInit 

  @Input() property: any;

  constructor(
    private propertiesService: PropertiesService
  )  

  ngOnInit() 
  

模板

<input type="text" class="form-control" required name="title" [(ngModel)]="property.title" #title="ngModel">

父组件

<app-edit-property [property]='property'></app-edit-property>

答案

对于双向绑定工作，您必须实现一个具有相同属性名称的@Output，并将Change更改为后缀，如下所示：

@Input() counter;
@Output() counterChange = new EventEmitter();

在HTML中，你添加[(counter)]="someValue"

你发出这样的新值：

this.counterChange.emit(this.counterValue);

另一答案

@Input指令专为单向绑定而设计。您只能使用@Input获取组件的值。使用@Output指令从组件中发出值，以便父组件接收该值。