Carga angular más en el primer evento de desplazamiento -- angular campo con typescript camp Relacionados El problema

Angular load more on first scroll event


0
vote

problema

Español

Necesito ayuda para hacer mi aplicación angular para inicializar cargar tres objetos, y tan pronto como el usuario se desplaza a que se cargue todos los objetos restantes. Pero estoy un poco atascado y no tengo idea de cómo pasar de aquí. ¿Podría alguien darme una mano y ayudarme o al menos señalarme en la dirección correcta?

Aquí está mi código: (Perdón por un post de código tan largo)

  <p class="timeline-Tweet-text" lang="en" dir="ltr"> 4  

}

Original en ingles

I need some help to make my angular-application to on initialize load three objects, and as soon as the user scrolls all the remaining objects will load. But I'm kinda stuck and have no idea how to move on from here.. Could someone give me a hand and help me or at least point me in the right direction?

Here's my code: (Sorry for such a long code post)

import { Component, ComponentFactoryResolver, OnDestroy, OnInit, ViewContainerRef, Type, ViewChild, Input, ViewEncapsulation } from '@angular/core'; import {Location} from '@angular/common'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/takeUntil'; import { SectionsService } from './sections.service'; import { Router } from '@angular/router'; import {GlobalsService} from './globals.service';  @Component({   selector: 'app-sections',   templateUrl: './sections.component.html',   styleUrls: ['./sections.component.scss'],   encapsulation: ViewEncapsulation.None }) export class SectionsComponent implements OnDestroy, OnInit {  @ViewChild('sections', {read: ViewContainerRef}) sections;  private ngUnsubscribe: Subject<boolean> = new Subject(); private pathString; private lang = ''; public notFound = false;  constructor(     private componentFactoryResolver: ComponentFactoryResolver,     private viewContainerRef: ViewContainerRef,     private sectionsService: SectionsService,     private location: Location,     private router: Router,     private globalsService: GlobalsService, ) {     this.pathString = location.path();     this.lang = this.globalsService.getLanguage() !== '' ? '/' + this.globalsService.getLanguage() : ''; }   getSections(pagePath): void {     if (pagePath === '/undefined' || pagePath === '/false') {         return;     }      this.sectionsService.getSections(pagePath)         .takeUntil(this.ngUnsubscribe)         .subscribe(         res => {           const loadFirst = res.slice(0, 3);           const loadAfter = res.slice(2).event.srcElement.scrollTop;           this.loadSections(res, pagePath);         },         error => {             this.notFound = true;         }); }  loadSections(sections, pagePath) {     for (const section in sections) {         if (sections.hasOwnProperty(section)) {             this.loadSection(sections[section].charAt(0).toUpperCase() + sections[section]                 .substr(1).toLowerCase() + 'Component',                 section,                 pagePath,                 section);         }     }      this.globalsService.setDoneLoading(true); }  loadSection(section, sectionUniqueId, pagePath, index) {     const factories = Array.from(this.componentFactoryResolver['_factories'].keys());     const factoryClass = <Type<any>>factories.find((x: any) => x.componentName === section);      const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);     const ref = this.sections.createComponent(factory);     ref.instance.sectionUniqueId = sectionUniqueId;     ref.instance.sectionPagePath = pagePath;     ref.instance.sectionIndex = index;     ref.changeDetectorRef.detectChanges(); }  ngOnInit() {     this.getSections(this.pathString); }  ngOnDestroy() {     this.ngUnsubscribe.next();     this.ngUnsubscribe.complete(); } 

}

     

Lista de respuestas

1
 
vote

Puede usar un desplazamiento virtual de CDK angular que le permitirá prestar datos en Scroll. https://material.angular.io/cdk/scrolling

 

You can use angular cdk virtual scroll which will allow you render data on scroll. https://material.angular.io/cdk/scrolling

 
 

Relacionados problema

-3  Superposición con la imagen superior CSS  ( Overlap with top image css ) 
Necesito crear ion-card como se muestra a continuación. He intentado muchas maneras. Pero no hay suerte todavía. ¿Alguna pista? Note: tiene 2 imágenes. ...

0  Obtención de Error TypeError: No se puede leer la propiedad '0' de indefinido en suscríbase  ( Getting error typeerror cannot read property 0 of undefined on subscribe ) 
Estoy recibiendo el siguiente error al intentar suscribirme a un punto final. Aquí está mi código y la respuesta del punto final. Cuando consola registre la r...

1  TypScript - Método personalizado fuera de la promesa  ( Typescript custom method off promise ) 
He declarado un método que devuelve la promesa: confirm(title: string, message: string) { var promise = new Promise((resolve, reject) => { ......

-1  Desplácese cuando el teclado esté abierto  ( Scroll when the keypad is open ) 
En mi pantalla, escribo el campo de entrada y obtenga resultados de búsqueda en consecuencia. La lista se presenta dentro de una vista de desplazamiento, pero...

2  TypeScript: Tipo '{}' no se le asigna a escribir 'Pick <T, K>', ¿cómo puedo escribir correctamente JavaScript `Pick`?  ( Typescript type is not assignable to type pickt k how do i type java ) 
Quiero escribir una función llamada pick , Sé que TypeScript ha incorporado Pick<T, K> , ahora quiero implementar la parte real del uso del código fuente, p...

0  La propiedad de la interfaz Súper de anulación de TypScript no funciona  ( Typescript override super interface property doesnt work ) 
Tengo la siguiente interfaz: interface Person { name: string; id: number; prop: number; } Quiero crear otro entrelazado que lo extienda: defau...

2  Configuración de reaccionar StyleGuidist con Siguiente.js y TypeScript  ( Setting up react styleguidist with next js and typescript ) 
Estoy tratando de configurar reaccionar StyleGuidist con Siguiente.js y TypeScript, pero sigo caminando en problemas. My actualyguide.config.js se ve así: ...

0  Cómo obtener el elemento DOM exacto usando Useref en reaccionar  ( How to get exact dom element using useref in react ) 
Estoy tratando de obtener el elemento DOM exacto en la lista de LISTITEM de la lista usando 'reacc.useref (null);' Pero no puede conseguirlo, estoy usando el ...

0  ¿Cómo puedo incorporar tipos de secuelas en mi archivo de tipificación de proyectos?  ( How can i incorporate sequel types into my project typings file ) 
Quiero incorporar en mis typings raíces ( /index.d.ts ) Algunos tipos que pertenecen a sequel que se definen en @types/sequel/index.d.ts . Sé que no pued...

0  No se puede imprimir datos JSON anidados con 6  ( Cant print nested json data with angular 6 ) 
Estoy aprendiendo a codificar y simplemente me encontré con este problema con la angular 6 que parece que no puedo resolver. Fui capaz de obtener los datos de...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos