angular - How to save model manipulation of *ngFor with pipes? - "#item of (result = (items | orderAsc))" doesn't work in A2 -
so populate table *ngfor , use pipes filter , order given items array. works , table rows created expected. wan't use result of pipes in component hosting table. how can achieved angular2?
my current html:
<tr *ngfor="#item of items | orderasc">{{item.name}}</tr>
the old angularjs way of saving result:
<tr *ngfor="#item of (result = (items | orderasc))">{{item.name}}</tr>
where "result" used in corresponding controller.
what angular2 way of achieving this? i'd keep filtering in html template , not move component.
as far know, old way isn't supported.
i have workaround don't know if it's clean way ;-)
you implement custom pipe (the dump
1 in following sample) put @ end of pipe chain save filtered value component
@pipe({ name: 'filter' }) export class filterpipe { (...) } @pipe({ name: 'sort' }) export class filterpipe { (...) } @pipe({ name: 'dump' }) export class dumppipe { constructor(@inject(forwardref(() => appcomponent)) app:appcomponent) { this.app = app; } transform(array: array<string>, args: string): array<string> { this.app.save(array); return array; } } @component({ selector: 'my-app', template: ` <div> <span *ngfor="#l of (list | filter | sort)">{{l}}</span> </div> `, pipes: [ filterpipe, sortpipe, dumpfilter ] }) export class appcomponent { constructor() { this.list = [ 'n', 'g', 'a', 'u', 'r', 'l' ]; } save(array) { console.log('save array = '+array); } }
when expression evaluated, dump
pipe calls save
method of component filtered , sorted value.
here corresponding plunkr: https://plnkr.co/edit/xv4btq7acykjskca9qb9?p=preview
hope helps you, thierry
Comments
Post a Comment