कोणीय 4: असीमित स्क्रॉल काम नहीं कर रहा है

मैंने ngx-अनंत-स्क्रॉल (https://www.npmjs.com/package/angular2-infinite-scroll) और कुछ अन्य निर्देशों का उपयोग करने का प्रयास किया है लेकिन कोई भी काम नहीं कर रहा है।कोणीय 4: असीमित स्क्रॉल काम नहीं कर रहा है

package.json

"dependencies": { 
"@angular/animations": "^4.0.2", 
"@angular/common": "^4.0.0", 
"@angular/compiler": "^4.0.0", 
"@angular/compiler-cli": "^4.0.2", 
"@angular/core": "^4.0.0", 
"@angular/forms": "^4.0.0", 
"@angular/http": "^4.0.0", 
"@angular/platform-browser": "^4.0.0", 
"@angular/platform-browser-dynamic": "^4.0.0", 
"@angular/platform-server": "^4.0.2", 
"@angular/router": "^4.0.0", 
"absurd": "^0.3.8", 
"angular2-masonry": "^0.4.0", 
"animate.css": "^3.5.2", 
"bootstrap": "^3.3.7", 
"core-js": "^2.4.1", 
"font-awesome": "^4.7.0", 
"jquery": "^3.2.1", 
"jquery-slimscroll": "^1.3.8", 
"metismenu": "^2.7.0", 
"ng2-bs3-modal": "^0.10.4", 
"ngx-infinite-scroll": "^0.5.1", 
"rxjs": "^5.1.0" 
}

user.component.html

<div class="row" infiniteScroll [infiniteScrollDistance]="0" 
    [infiniteScrollThrottle]="300" (scrolled)="loadMore()"> 
    <div class="col-md-3 col-sm-4" *ngFor="let user of userList"> 
    <span>{{user.name}} ({{user.email}})</span> 
    </div> 
</div>

user.module.ts

आयात किया जाता है

+०१२३५१६४१०६

import { InfiniteScrollModule } from 'ngx-infinite-scroll'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    InfiniteScrollModule 
    ], 
    declarations: [UserComponent], 
    providers: [], 
    exports: [], 
}) 
export class UserModule { }

user.component.ts

export class UserComponent { 

    constructor() {} 

    loadMore() { 
    console.log('method begins'); 
    } 
}

रूप में अच्छी तरह मेजबान श्रोता का उपयोग कर की कोशिश की लेकिन पुस्तक घटना बस होने के लिए प्रतीत नहीं होता। क्या कक्षा का उपयोग करने के लिए मुझे कुछ भी मिला है जिस पर अनंत स्क्रॉल लागू किया गया है?

स्रोत

2017-05-11 Sanchit Tandon

अपने कंटेनर div

<div class="row" style="height: 90%" 
    infiniteScroll [infiniteScrollDistance]="0" 
    [infiniteScrollThrottle]="300" (scrolled)="loadMore()"> 
    <div class="col-md-3 col-sm-4" *ngFor="let user of userList"> 
    <span>{{user.name}} ({{user.email}})</span> 
    </div> 
</div>

स्रोत

2017-06-07 08:49:52

document अंदर के बारे में उल्लेख किया है की ऊंचाई सेट करना होगा।

डिफ़ॉल्ट रूप से, निर्देश विंडो स्क्रॉल ईवेंट को सुनता है और कॉलबैक का आह्वान करता है। जब वास्तविक तत्व स्क्रॉल किया है कॉलबैक को गति प्रदान करने के लिए निम्न सेटिंग्स कॉन्फ़िगर किया जाना चाहिए:

[scrollWindow] = "false"

तत्व

के लिए एक explict सीएसएस "ऊंचाई" मान सेट

इसलिए, ऊंचाई को रखें: अपने कंटेनर पर 100% और आप स्क्रॉल किए गए स्क्रॉल देखेंगे।

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    styles: [ 
     `.search-results { 
      height: 20rem; 
      overflow: scroll; 
     }` 
    ], 
    template: ` 
     <div class="search-results" 
      infiniteScroll 
      [infiniteScrollDistance]="2" 
      [infiniteScrollThrottle]="500" 
      (scrolled)="onScroll()" 
      [scrollWindow]="false"> 
     </div> 
    ` 
}) 
export class AppComponent { 
    onScroll() { 
     console.log('scrolled!!') 
    } 
}

स्रोत

2017-07-04 07:18:20 trungk18

वाह, धन्यवाद - एचटीएमएल कोड ऊपर }

उपयोग यह ठीक काम करता है! मुझे घंटों लगे! :) – dave0688

 <div 
     [infiniteScrollDistance]="2" 
     [infiniteScrollUpDistance]="1.5" 
     [infiniteScrollThrottle]="100" 
     (scrolled)="onScrollDown()" 
     [scrollWindow]="false"class="search-results"> 
     <div *ngFor="let user of userList"> 
     <span>{{user.name}} ({{user.email}})</span> 
     </div> 
     </div>

.search-परिणाम { ऊंचाई: 100% अतिप्रवाह-y: स्क्रॉल; scrollWindow संकेत के लिए angular2 infinite scroll

स्रोत

2017-10-04 06:24:09

कोणीय 4: असीमित स्क्रॉल काम नहीं कर रहा है

उत्तर

संबंधित मुद्दे