Well, I found out that my approach was wrong. I don't know exactly how to
use onCheck, but after a few more tries I moved my logic from onCheck to
onInit like this
onInit() {
//console.log(this.http);
this.http.get('json/items_list.json')
.toRx()
//.map(res => res.json())
.subscribe((res: Response) => {
//console.log(res.json());
let items = res.json().items;
let keys = Object.keys(items);
for(let i = 0; i < keys.length; i++) {
this.list_items.push({
name : tmp_items[keys[i]].name,
image : tmp_items[keys[i]].image
});
}
});
}
This way I don't need to use onCheck. And it fixed my issue. I hope it can
help someone.
El sábado, 25 de julio de 2015, 18:14:51 (UTC-3), Eric Martinez escribió:
>
> Hey there!
>
> I'm trying to migrate my ng1 app to ng2.
>
> I have this HTML structure, really simple
>
>
> <div class="col-md-1 scroll-list" lazy-scroll-last>
>
> <div class="list-group text-center">
>
> <lazy-scroll-image-last></lazy-scroll-image-last>
>
> </div>
>
> </div>
>
>
> For my lazy-scroll-last div I have this directive
>
> @Directive({
> selector : '[lazy-scroll-last]',
> host : {
> '(scroll)' : 'OnDivScroll()'
> }
> })
> export class LazyLoadScrollComponent {
>
> constructor(element: ElementRef) {
>
> }
>
>
> onInit() {
> console.log('Scroll div initiated');
> }
>
>
> OnDivScroll() {
>
> }
> }
>
>
> And for the lazy-scroll-image-last component I have this code (it prints
> over 720 elements)
>
>
> @Component({
> selector : 'lazy-scroll-image-last',
> viewInjector : [httpInjectables]
> })
> @View({
> template : `
> <a href="#/#img"
> class="list-group-item menu-thumbnail"
> *ng-for="#item of list_items; #i = index">
> <img lazy-image [title]="item.image" />
> h4>{{item.name}}</h4>
> </a>
> `,
> directives: [NgFor, LazyImage] // LazyImage code skipped, not relevant
> })
> export class LazyLoadImageComponent {
>
>
> constructor(element: ElementRef, http: Http) {
> this.element = element;
> this.http = http;
> this.list_items = [];
> this.tmp_list_items = [];
> }
>
>
> onInit() {
> //console.log(this.http);
> this.http.get('json/filejson.json')
> .toRx()
> .map(res => res.json())
> .subscribe(tmp_items=> {this.tmp_list_items = tmp_items});
> }
>
>
> onCheck() {
> console.log('Child onCheck');
> if(typeof this.tmp_list_items !== 'undefined') {
> let keys = Object.keys(this.tmp_list_items);
> for(let i = 0; i < keys.length; i++) {
> this.list_items.push({
> name : this.tmp_list_items.items[keys[i]].name,
> image : this.tmp_list_items.items[keys[i]].image
> });
> }
> }
> }
> }
>
>
> Everything works, but everytime I scroll the div, the children's onCheck
> is called and that is making it extremely slow because of the logic I have
> inside of it, Is that the expected behaviour?. When it is executed for the
> first time, the onCheck is called three times (I don't understand why) but
> it works. Then it loads the list (from the json, see onInit) with ng-for
> and prints it.
>
> What I expect is the component (child element) to repeat the elements so I
> have my list, and then the parent div scroll over them and do some logic I
> still can't do because of this.
>
> As far as I know and I understood, from the documentation
> <https://angular.io/docs/js/latest/api/annotations/OnCheck-interface.html>
> the
> onCheck is called everytime the directive is being checked, but the
> directive being checked is the parent's one, not the children's. Is my
> approach wrong? (most likely).
>
> I made this plunkr http://plnkr.co/edit/jDCu8H1qzG3Zqpc7VqRC?p=preview
> but I get a white screen, but at least you can see the code.
>
>
> Any advice? Am I missing something obvious?
>
> Thanks in advance
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
