时间戳

首页 > 解决方案 > 角度输入设置器仅触发一次

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

问题描述

我想在问题开始前说明我已经阅读并理解了其他可能重复的问题（例如这个问题）并且无法完成这项工作，这使我相信这个问题在本质上有点不同，或者我误解了一些东西。

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

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

在主视图组件中，我将 filterObject 变量提供给管道以过滤对象数组。

问题：在我第一次更改过滤器后，管道只被调用一次。当像这样显示时，主视图中的 filterObject 变量显示正确更新，{{filterObject | json}}但从未调用 setter。放入 setter 和 getter 的控制台日志显示只有 getter 获得访问权限 (2-4)

我尝试过的解决方案：

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

侧面菜单组件.html

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

侧面菜单组件.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>

父组件.ts

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

主视图组件.html

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

主视图组件.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

我真的很想做到“角度方式”所以我的问题是我在这里错过了什么？

标签： angulartypescriptsetterangular-decorator

解决方案

可能是您的侧边菜单组件发出了相同的对象。它的内容可能会改变，但发射的对象仍然是相同的。考虑改为发出对象的副本。Object.assign({}, this.filterObject)可以帮助你。

推荐阅读