Angular 12 将数据传递给 ngFor 中的子级

Question

我在将数据传递给放在 PrimeNg TabPanel 中的 ngFor 中的子级时遇到问题。 父组件类似于：

<p-tabPanel header="{{tab.title}}" *ngFor="let tab of tabs; let i = index" [closable]="true" [selected]="active[i+1]">
   <app-edit-tab [profile]="profiles[i]" (profileModifiedEvent)="profileModifiedEvent($event, i)"></app-edit-tab>
</p-tabPanel>

子组件是一个编辑选项卡，包含：

@Component({
    selector: 'app-edit-tab',
    templateUrl: './edit-tab.component.html'        
})
export class EditTabComponent implements OnInit {
    @Input() profile: Profile;
    backupProfile: Profile;
    @Output() profileModifiedEvent: new EvenEmitter<Profile>();

    ngOnInit() {
        this.backupProfile = Object.assign({}, profile);
    }

    editProfile() {
        this.profileModifiedEvent.emit(this.profile);
    }
}

我为重置编辑字段制作备份副本，并使用输入配置文件对象作为模板中的模型。 如果我打开 2 个选项卡，我会在 onInit 中检查备份副本是否正确：第一个选项卡包含传递的第一个配置文件的副本，称之为 A，第二个选项卡包含传递的第二个配置文件的副本，称之为 B。 问题是，在第二个选项卡中，当调用 editProfile() 时，配置文件对象不是 B，而是 A！就好像第二个选项卡具有配置文件 A 的内容，但我在 onInit 中检查到配置文件是 B！ 有办法解决这个问题吗？每个选项卡都需要有一个输入配置文件对象的副本。

编辑： 也许真正的问题是：将从数组获取的参数传递给子组件的最佳方法是什么？

Answer 1

如果我是你，我会尝试生命周期钩子 ngOnChanges()。尽管我不知道您所提供的确切用例/问题，但您的子组件有可能在第一次渲染时将 @Input() 值设置为某个值。然后，当父级中的值发生更改时，子级中的值不会自动更新，因为这就是 Angular 的工作原理。

使用 ngOnChanges() {} 检测更改并相应更新您的 @Input() 值！