¿Cómo reducir el tiempo para mostrar una lista (JSON Object Fetched de la base de datos) en una tabla usando * NGFOR Directiva estructural? -- angular5 campo con angular6 campo con angular-directive camp Relacionados El problema

how to reduce time to display a list (json object fetched from database) in a table using *ngFor structural directive?


0
vote

problema

Español

Estoy buscando un objeto JSON usando la API web, y mostrándola en una tabla usando * NGFOR Directiva estructural. Sin embargo, el problema es, aunque el objeto se obtiene al instante y se muestra en la consola, le toma tiempo para mostrarlo en la tabla. Quiero que el objeto se muestre en la tabla al instante tan pronto como llegue a la consola.

archivo component.html;

   <tr *ngFor="let data of orgData" id="{{data.Id}}">           <td hidden><input type="number" id="1" value="{{ data.Id }}"></td>           <td>{{ data.OrganisationName }}</td>           <td>{{ data.ContactPerson }}</td>           <td>{{ data.ContactPersonHPNo }}</td>           <td>{{ data.ContactPersonEmailId }}</td>           <td>{{ data.SubscriptionStatus }}</td></tr>   

archivo component.ts;

    ngOnInit() {  // making use of web API this.httpService.get('http://url/StudyExAPI/GetOrganisations?Id=').subscribe(   data => {     this.orgData = data as string[];     // console.log(this.orgData);   },   (err: HttpErrorResponse) => {     console.log(err.message);   } );}   
Original en ingles

I am fetching a json object using web API, and displaying it in a table using *ngFor Structural Directive. However the problem is, though the object gets fetched instantly and display in console, it takes time to display it in table. I want the object to be displayed in table instantly as soon as it comes into console.

component.html file;

 <tr *ngFor="let data of orgData" id="{{data.Id}}">           <td hidden><input type="number" id="1" value="{{ data.Id }}"></td>           <td>{{ data.OrganisationName }}</td>           <td>{{ data.ContactPerson }}</td>           <td>{{ data.ContactPersonHPNo }}</td>           <td>{{ data.ContactPersonEmailId }}</td>           <td>{{ data.SubscriptionStatus }}</td></tr> 

component.ts file;

  ngOnInit() {  // making use of web API this.httpService.get('http://url/StudyExAPI/GetOrganisations?Id=').subscribe(   data => {     this.orgData = data as string[];     // console.log(this.orgData);   },   (err: HttpErrorResponse) => {     console.log(err.message);   } );} 
        

Lista de respuestas

0
 
vote

Si tiene muchos objetos dentro de su matriz, puede usar la ventana de desplazamiento virtual proporcionada por el paquete @angular/cdk que rinden solo elementos visibles.

 

If you have a lot of objects inside your array, you can use the virtual scroll viewport provided by package @angular/cdk which render only visible elements.

 
 

Relacionados problema

0  Directiva AngularJS Directiva de dos vías: ¿Cómo preservar la referencia?  ( Angularjs directive two way binding how to preserve reference ) 
Tengo una directiva que tiene una vinculación de dos vías con un atributo. Quiero volver a asignar el atributo en la función de enlace. Sin embargo, esto romp...

0  El cambio de tamaño de Angularjs se superpone en DIV en IMG-Responsive  ( Angularjs resizing overlayed on divs on img responsive ) 
http://plnkr.co/edit/mqb85ejjxzhol5vkv4ua?p=preview < / p> Tengo un elemento sensible a IMG de bootstrap con elementos DIV superpuestos. Cómo puede cambiar...

0  Variable del controlador de alcance de acceso en la directiva angular  ( Access scope controller variable in directive angular ) 
Quiero acceder a la variable de alcance total en la propiedad de enlace de directiva. Aunque el valor total se está actualizando en el evento de Mousedown...

0  ¿Cómo agregar divulgación DIV automáticamente a DIV adyacente en Angular 2?  ( How to add overflowing div automatically to adjacent div in angular 2 ) 
Estoy trabajando en una aplicación del editor de documentos usando angular 6. Tiene un elemento de papel que parece un papel de tamaño fijo. El usuario pued...

0  Desacoplamiento de la DOM y trayendo la funcionalidad a una directiva  ( Decoupling from the dom and bringing functionality into a directive ) 
Estoy tratando de hacer una directiva de componentes a componentes. En este punto, he hecho una prueba de concepto con la lógica que vive en el componente de ...

0  Material - Pase directiva al componente secundario  ( Material pass directive to child component ) 
Yo uso el material de la grapadora, y necesito pasar una directiva personalizada al componente, para acceder a las propiedades del elemento por la directiva d...

9  Problema de rendimiento de AngularJS con temporizador disparado  ( Angularjs performance issue with timer fired ) 
Estoy construyendo una aplicación bastante grande angular, Mi problema es que las pérdidas de memoria que resulta en la página congelación. al hacer clic en u...

3  Error: [$ compilación: twload] Error al cargar la plantilla  ( Error compiletpload failed to load template ) 
Tengo numerosas directivas en mi aplicación angular, todas las cuales parecen funcionar como se esperaba el 95% del tiempo. Recientemente, he estado trabajand...

0  Mostrar [Object Htmlelement] como HTML en Angular  ( Display object htmlelement as html in angular ) 
Tengo una directiva, y estoy tratando de cambiar el innerhtml de un htmlobject. Report(date)3 funciona, pero cuando veo los cambios que siempre se muest...

0  ¿Por qué la forma impulsada por la plantilla en la asíncrona angular?  ( Why is template driven form in angular asynchronous ) 
flujo de datos en forma basada en plantilla Encontré esta tabla de la documentación oficial de angular. Afirma que cada vez que se actualiza un valor en l...




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