在使用 Angular 开发过程中,我们常常会遇到一些看似简单但却容易出错的场景。今天,我们来探讨一下如何解决 ngFor 循环中出现的作用域问题,特别是当多个组件共享同一个数据模型时。
问题描述
假设你有一个父组件,其中包含多个子组件。每个子组件内部又包含一个复选框列表,这些复选框都是通过 ngFor 生成的。理想情况下,每个子组件内的复选框应该独立操作,但实际上却会出现一个问题:当你勾选其中一个子组件内的复选框时,其他子组件中的相同位置的复选框也会被勾选。这是因为这些子组件共享了同一个数据模型。
代码示例
以下是典型的父子组件结构:
父组件模板:
<divclass="bloco-bilhete"id