angular - 如何在将用户定义的 "Query"对象传递给管道而不是字符串(Angular 2)时保持更改检测事件？

Question

(TL;DR:问题摘要见下文)

我有一个大型数据集，我想使用多个条件对其进行过滤。一切都很好，但是我不得不做一些我想摆脱的讨厌的事情。

我正在使用 angular2-datatable 包，但我想问题出在我对 angular 缺乏理解的某个地方。因此，最棘手的事情之一是我必须为每个过滤条件创建一个管道。

<table class="table table-striped" [mfData]="(((data | wstateFilter : filterQuery.wstate ) | dataSubjectFilter : filterQuery.subject) | dataResponsibilityFilter : filterQuery.personResponsible) | issuedByFilter : filterQuery.issuedBy" #mf="mfDataTable">
     

这现在看起来可能不太糟糕，但稍后可能会爆炸为至少 20-50 个管道，仅用于 4 个数据集。

我想定义一个包含所有过滤条件的 FilterQuery 对象，以及一个将这些对象作为查询的相应管道。

<table [mfData]="((data | dataSetFilter : filterQuery" #mf="mfDataTable">

查询对象现在看起来像:

export class TaskQuery {
    public subject: string;
    public wstate: TaskWorkstate;
    public personResponsible: string;
    public issuedBy?: string;
}

我是这样定义管道的:

import * as _ from "lodash"
import { Pipe, PipeTransform } from "@angular/core";
import { Task, TaskQuery } from './task.import'

@Pipe({
     name: "dataSetFilter"
     })
export class QueryPipe implements PipeTransform {
    transform(array: Task[], query: TaskQuery): any {
        array = _.filter(array, function (o) {
            if (!(o.subject.indexOf(query['subject']) > -1)) return false;
            if (o['personResponsible'].indexOf(query['personResponsible']) < 0) return false;
            if (o.hasOwnProperty('issuedBy')) {
                if (o['issuedBy'].indexOf(query['issuedBy']) < 0) return false;
            }
            return true;
        });
        return array;
    }
}

到目前为止，管道正常工作，正如预期的那样。对于硬编码的 TaskQuery 对象，管道执行我想要的操作。当我想对 TaskQuery 对象的变量使用数据绑定(bind)时，问题就出现了。

例如:

 <input class="form-control" [(ngModel)]="filterQuery.personResponsible" />

完成后，不会触发更改检测，数据也不会通过管道传输。我猜是因为 Angular 可能只是查看对对象 filterQuery 的引用, 这显然保持不变。

这个简单的解决方法也不起作用:

<input class="form-control" [ngModel]="filterQuery.subject" (ngModelChange)="temp=filterQuery; temp.setSubject($event); filterQuery=temp" />

...因为对象是通过引用传递的:-(。

此外，angular 不允许我执行 let或 new模板中的语句。因此，到目前为止我无法创建新的引用。

所以问题:

• 是否可以以某种方式将对象标记为已更改？ (这才是我真正想要的)

• 如何在模板文件中创建新的对象引用？ (例如 <input class="form-control" [ngModel]="filterQuery.subject" (ngModelChange)="temp=new FilterQuery().copy(filterQuery); temp.setSubject($event); filterQuery=temp">)

Answer 1

我通过在 xyz.component.ts 中定义一个方法 newQuery() 使其工作，可以使用 (ngModelChange)="filterQuery.set('subject ', $event); newQuery()"

函数 newQuery() 生成一个新的引用并覆盖旧的

public newQuery(): void {
    this.filterQuery = Object.assign(new TaskQuery(), filterQuery);
}

我并不完全满意，因为它仍然感觉像是一个不太脏的解决方法。但是，它消除了迄今为止的大部分缺点。