在Angular 7中,当你在一个组件中使用@Input装饰器来接收父组件传递的属性时,如果你在子组件中使用的属性名称与父组件中传递的属性名称不一致,就会出现这个错误。
要解决这个问题,你需要在子组件中声明一个与父组件中传递的属性名称相同的属性,并在该属性上使用@Input装饰器。
以下是一个示例代码,演示了如何解决这个问题:
在父组件中:
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
selectedItem: any = { id: 1, name: 'Item 1' };
}
在子组件中:
@Component({
selector: 'app-child',
template: `
Selected Item: {{ selected.name }}
`
})
export class ChildComponent {
@Input() selected: any;
}
在这个示例中,父组件通过[selected]属性将selectedItem对象传递给子组件。在子组件中,我们声明了一个名为selected的属性,并使用@Input装饰器将其标记为输入属性。现在,子组件就可以在模板中使用selected属性,并且不会出现上述错误。
上一篇:Angular 7中的403错误未被catchError函数捕获
下一篇:Angular 7中的表单表达式ChangedAfterItHasBeenCheckedError - 带有条件输入字段