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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -