角度输入设置器仅触发一次

我想在问题开头说我已经阅读并理解了其他可能重复的问题(例如这个问题)，并且无法完成这项工作，导致我相信问题在性质上有点不同，或者我误解了某些东西。

上下文：我有一个带有两个子组件(侧菜单和主视图)的父组件。侧边菜单有一些复选框形式的过滤器，通过[(ngModel)]绑定到对象，并使用模板中的(ngModelChange)="changeFilter()"触发事件。

在父组件中，我捕获了事件：(filter)="updateFilters($event)"。此函数更改一个公共过滤器变量，然后将其传递给另一个子组件，如下所示：[filterObject]="filters"

在主视图组件中，我将 filterObject 变量馈送到管道中，以便过滤对象数组。

问题：在我第一次更改过滤器后，管道只被调用一次。主视图中的 filterObject 变量在如下所示时显示正确更新{{filterObject | json}}但从未调用 setter。放入二传手和吸气机的控制台日志显示只有吸盘手才能获得访问权限 (2-4)

我尝试过的解决方案：

向管道添加附加参数以触发它。这种方法的问题在于，需要从 setter 为未被调用的filterObject设置新日期 - 如上所述
管道不纯(有效但不是一个非常好的解决方案，因为它使它每次单击处理非常大的复杂对象数组 2-4 次)
使父级更新过滤器变量，不是通过赋值运算符，而是通过Object.assign来更改引用并可能触发资源库

我正在考虑的解决方案：如果我无法弄清楚问题是什么，我正在考虑创建一个服务，通过观察者在两个组件之间进行通信。否则，我可能不得不满足于嵌入了一些自定义更改检测的不纯管道(我正在考虑将过滤器对象转换为 JSON 字符串并检查长度)。

侧边菜单组件.html

<input type="checkbox" id="filter-type-2" name="filter-type-2" [(ngModel)]="filterObject.type.me" (ngModelChange)="changeFilter()">

side-menu-component.ts

@Output() filter = new EventEmitter();
public filterObject = {
type: {
mo: true,
me: true,
ar: true,
cto: true,
gl: true,
dl: true
},
status: {
unreviewed: true,
approved: true,
other: true
}
};
// ...
changeFilter() {
this.filter.emit(this.filterObject);
}

父组件.html

<aside>
<app-article-view-aside [article]="article" (close)="closeModal($event)" (filter)="updateFilters($event)"></app-article-view-aside>
</aside>
<div class="articleContainerMainView">
<app-article-view-main [article]="article" [filterObject]="filters"></app-article-view-main>
</div>

parent-component.ts

updateFilters(newFilter) {
this.filters = newFilter;
}

主视图组件.html

<app-finding
*ngFor="let finding of findings | findingsFilter:filterDate:filterObject; let i = index"
[finding]="finding"></app-finding>

main-view-component.ts

@Input() set filterObject(filterObject) {
console.log('setter');
this._filterObject = filterObject;
this.filterDate = Date.now();
}
get filterObject() {
console.log('getter');
return this._filterObject;
}
private _filterObject = {};
public filterDate = Date.now();

首次显示页面时的控制台输出：

setter
getter
getter
getter
getter

我真的很想做"棱角分明的方式"，所以我的问题是我在这里错过了什么？

可能是您的侧边菜单组件发出相同的对象。其内容可能会更改，但发出的对象仍然相同。请考虑改为发出对象的副本。Object.assign({}, this.filterObject)可能会对您有所帮助。

这与生命周期的更改检测有关。如果没有一个最小，完整和可验证的例子，我不能真正告诉你如何解决它，但我绝对可以告诉你如何解决它。

首先给你第二个组件一个模板变量，并告诉你的输出更新其中的数据：

<aside>
<app-article-view-aside [article]="article" (close)="closeModal($event)" (filter)="mainView.updateData($event)"></app-article-view-aside>
</aside>
<div class="articleContainerMainView">
<app-article-view-main #mainView [article]="article" [filterObject]="filters"></app-article-view-main>
</div>

在第二个组件中，不要使用管道，而是更新函数中的值：

updateData(event) {
// original data is the unfiltered array of data
this.findings = this.originalData.filter(...);
}

在您的模板中，它变成了

<app-finding
*ngFor="let finding of findings; let i = index"
[finding]="finding"></app-finding>

问题是当你第一次通过过滤器时，你给了它一个引用。因此，每次更改它时，角度的变化检测将永远不会检测到它，因为您没有更改过滤器对象或引用。

解决方案：我想您有两种解决方案： 1.每次更新过滤器时，都会通过复制过滤器来更改其引用。 2. 在您的管道中实现 ngDoCheck，如果我没有错，即使您的引用仍然相同，它也会检测到此更改。

相关内容

最新更新

热门标签：