如何在将用户定义的“查询” – 对象传递给管道而不是字符串(Ang
(TL; DR:问题摘要见下文)
嗨,大家好. 我有一个大型数据集,我想使用多个条件进行过滤.这一切都很好,但我不得不做一些我想摆脱的讨厌的事情. 我正在使用angular2-datatable包,但我认为问题在于我对角度缺乏了解.因此,一个更糟糕的事情是我必须为每个过滤条件创建一个管道. <table class="table table-striped" [mfData]="(((data | wstateFilter : filterQuery.wstate ) | dataSubjectFilter : filterQuery.subject) | dataResponsibilityFilter : filterQuery.personResponsible) | issuedByFilter : filterQuery.issuedBy" #mf="mfDataTable"> 现在看起来可能不太讨厌,但是这可能会在4个数据集中爆炸至少20-50个管道. 我想定义一个包含所有过滤条件的FilterQuery对象,以及一个将这些对象作为查询的相应管道. <table [mfData]="((data | dataSetFilter : filterQuery" #mf="mfDataTable"> 查询对象现在看起来像: export class TaskQuery { public subject: string; public wstate: TaskWorkstate; public personResponsible: string; public issuedBy?: string; } 我已经像这样定义了Pipe: 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对象的变量时,问题就出现了. 例如: <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语句.因此到目前为止我无法创建新的引用. 所以问题: >是否可以将某个对象标记为已更改? (这就是我真正想要的) 解决方法
我通过在xyz.component.ts中定义一个方法newQuery()来实现它,该方法可以从模板调用(ngModelChange)=“filterQuery.set(‘subject’,$event); newQuery()”
newQuery()函数生成一个新引用并覆盖旧引用 public newQuery(): void { this.filterQuery = Object.assign(new TaskQuery(),filterQuery); } 我并不完全满意,因为它仍然感觉像是一个不那么肮脏的工作.然而,它消除了迄今为止的大多数缺点. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 第11题:开发shell脚本分别实现以脚本传参以及read读入的方
- 如何遍历在单个scala.xml.Node中找到的子项列表
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
- typescript – 从Angular2中的子组件切换父组件中的属性(类
- angularjs – 量角器通过绑定在转发器中找到元素?
- [Scala基础]--classOf[T]、getClass和 class
- AngularJS数据绑定无法正常工作
- 三、取消发布的WebService(删除一个发布成功的Web服务)
- node.js-启动时在Docker容器中创建环境变量
- AngularJs ng-repeat重复项异常解决方案