父级和子级在 Angular 17 中不保持同步

Question

我正在使用 Angular 17 并使用 @Input 和 @Output 在父级和子级之间进行同步。问题是两者之间的同步不一致。（请参阅随附的屏幕截图）。在某些时候，同步失败，之后，子项似乎仍落后于父项 1 条记录。例如，在屏幕截图中发生了故障，“公寓业主”无法加载。当在下拉列表中进行下一个选择时，“公寓业主”将加载到子级中，每次新选择时，子级都会落后于父级 1 步。

我错过了什么？我尝试通过发出事件来手动更新子项，但这也不起作用。

谢谢！

  async loadAccount(accountID: string) {
this.accountsService.GetAccount(accountID).subscribe((response: Account) => {
  this.page.data.account = response;
  this.onPageUpdate.emit(this.page);   
});    

}

Answer 1

另一种方法，在父对象上创建一个对象并将其作为

@Input

属性传递给子对象，如下所示

导出类ParentComponent { nestedObj：任何= { ngModelValue：'测试'； ...

然后孩子就收到这个属性

导出类 ChildComponent { @Input()nestedObj！：任意；

在子组件HTML上，你可以这样做

...
<input [(ngModel)]="nestedObj.ngModelValue"/>
...

由于对象和数组传递引用的原理，由于父级和子级共享相同的引用，没有

@Output

两个组件之间的数据将同步，从而解决您的问题！

---

请将属性存储在服务中，然后使用 getter 和 setter 显示值，以便两者始终保持同步

...
constructor(private testService: TestService) {}

get showProperty() {
    return this.testService.showProperty;
}
set showProperty(value: any) {
    this.testService.showProperty = value;
}
...

如果两个组件中都有此代码，您可以在组件的 html 上使用相同的代码！

Answer 2

我找到了问题的原因。我的错误是使用了 onChangeSelected ，它出现在 mat-option 元素上。 onChangeSelected 适用于使用多选并将多次触发的情况。解决方案是在 mat-select 元素上使用 selectionChange 。我的 html 现在看起来像这样：

    <mat-form-field>
  <mat-select #AccountLookup placeholder="**Company **" (selectionChange)="loadAccount($event.value)">
    <mat-option *ngFor="let account of page.accountList| accountLookupFilter: page.selectedAccountStatus"
      [ngClass]="account.statusCode == 2 ? 'alert-error' : 'alert-success'" [value]="account.value">
      {{ account.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

@Naren Murali - 感谢您的时间和帮助