tag:forum.selfhtml.org,2005:/self Angular 8: NgxPaginationModule soll mit RESt API arbeiten – SELFHTML-Forum 2020-01-07T14:46:18Z https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762649#m1762649 hmm 2020-01-06T15:44:31Z 2020-01-06T15:44:31Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Hi,</p> <p>ich möchte in Angular 8 das NgxPaginationModule verwenden. Kann ich dieses Modul mit meiner REST API kommunizieren lassen? Falls ja, wie?</p> <p>Ich bekomme immer 15 Datensätze von meiner REST API, diese 15 möchte ich mir durch mein NgxPaginationModule anzeigen lassen. Leider weiß ich nur wie das geht, wenn mein Client sämtliche Daten kennt. Leider finde ich auch keine Beschreibung im Netz die zu meinem Problem passt.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762650#m1762650 dedlfix 2020-01-06T17:46:02Z 2020-01-06T17:46:02Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Tach!</p> <blockquote> <p>ich möchte in Angular 8 das NgxPaginationModule verwenden. Kann ich dieses Modul mit meiner REST API kommunizieren lassen? Falls ja, wie?</p> </blockquote> <p>Nein, das ist auch nicht nötig. Der Paginator ist nur für die Pagination nötig, nicht für die Anzeige und das Holen der Daten</p> <blockquote> <p>Ich bekomme immer 15 Datensätze von meiner REST API, diese 15 möchte ich mir durch mein NgxPaginationModule anzeigen lassen.</p> </blockquote> <p>Siehe Dokumentation zum Server-Side Paging, du musst totalItems angeben, damit er sich richtig anzeigen kann, auch wenn weniger Daten vorhanden sind.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762667#m1762667 hmm 2020-01-07T09:02:23Z 2020-01-07T09:02:23Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>danke.</p> <pre><code>this.config = { itemsPerPage: 15, currentPage: 1, totalItems: xyz }; </code></pre> <p><pagination-controls (pageChange)="pageChanged($event)"></pagination-controls></p> <p>Ich kann in pageChanged neue Daten von meiner REST APIanfordern die dann auch angezeigt werden wenn zb auf Page 2 geklickt wird. Aber ich kann die Daten von Page 1 nicht löschen, oder? Sollte ich bereits angeforderten Daten löschen oder lässt man die idr im Client stehen?</p> <p>Beispiel: Jemand klickt auf Page 1, dann auf 2 dann auf 3 etc., dann würde mein Array mit den Daten entsprechend anwachsen, damit das Framework die anzuzeigenden Daten unter dem entsprechenden Index findet, richtig?</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762668#m1762668 hmm 2020-01-07T09:05:56Z 2020-01-07T09:05:56Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>hm... angenommen das Datenarray kennt nur die Daten von Page 1 und der Anwender klickt auf Page 3 ohne auf page 2 geklickt zu haben, dann müsste ich mir die Daten von Page 3 holen und itemsPerPage viele Elemente vom Array befüllen, oder geht das besser?</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762669#m1762669 Christian Kruse https://wwwtech.de/ 2020-01-07T09:08:48Z 2020-01-07T09:08:48Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Hallo hmm,</p> <blockquote> <p>hm... angenommen das Datenarray kennt nur die Daten von Page 1 und der Anwender klickt auf Page 3 ohne auf page 2 geklickt zu haben, dann müsste ich mir die Daten von Page 3 holen und itemsPerPage viele Elemente vom Array befüllen, oder geht das besser?</p> </blockquote> <p>Vorweg: ich kenne mich mit Angular nicht aus. Aber in React würde man das so lösen, dass man nicht an das Array anhängt, sondern dass man das Array überschreibt mit den Daten von Seite 3, so dass nur Seite 3 angezeigt wird. Das kann man in Angular sicher ähnlich lösen.</p> <p>Das <code>fetch</code>-Result von Seite 1 würde man dann entweder in einem Caching-Layer cachen oder neu abrufen, wenn der User zu dieser Seite zurück kehrt. Oder beides: erst den gecachten Zustand anzeigen und wenn das <code>fetch</code>-Result da ist dieses anzeigen.</p> <p>Freundliche Grüße,<br> Christian Kruse</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762670#m1762670 hmm 2020-01-07T09:26:14Z 2020-01-07T09:26:14Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>danke. Mir ist leider nicht ganz klar wie das Framework beim Pagination arbeitet.</p> <p>Ich habe ein currentPage, ein totalItems, ein itemsPerPage und ein Array collection.</p> <p>Ich fordere für Seite 3 neue Daten für collection an und setze currentPage auf 3. Ich vermute, dass das Framework dann Daten von 2<em>itemsPerPage bis 3</em>itemsPerPage aus collection anfordert. Meine Datenanforderungsmethode kann die anderen Felder des Array "löschen". Das ist trotzdem etwas unschön.</p> <p>Die Datenanforderungsmethode wird bei jedem Pagination-Klickevent aufgerufen.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762671#m1762671 dedlfix 2020-01-07T09:29:56Z 2020-01-07T09:29:56Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Tach!</p> <blockquote> <blockquote> <p>hm... angenommen das Datenarray kennt nur die Daten von Page 1 und der Anwender klickt auf Page 3 ohne auf page 2 geklickt zu haben, dann müsste ich mir die Daten von Page 3 holen und itemsPerPage viele Elemente vom Array befüllen, oder geht das besser?</p> </blockquote> <p>Vorweg: ich kenne mich mit Angular nicht aus. Aber in React würde man das so lösen, dass man nicht an das Array anhängt, sondern dass man das Array überschreibt mit den Daten von Seite 3, so dass nur Seite 3 angezeigt wird. Das kann man in Angular sicher ähnlich lösen.</p> </blockquote> <p>Ja, wobei man hier auch beachten muss, wie es die Komponenten von ngx-pagination gerne hätten. Man hat als Datenauflistung sowas wie:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">*ngFor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>let item of collection | paginate: { itemsPerPage: 10, currentPage: p, totalItems: ti }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Das heißt, in collection sind (nur) die Daten der aktuellen Seite, wenn man Server-Side Paging betreibt und <code>totalItems</code> setzt. Dieser Variable (sprich: Eigenschaft der Component) muss man einen neuen Wert (ein neu erzeugtes Array) zuweisen, damit die Change Detection die Änderung mitbekommt. Daten in dem bestehenden Array lediglich zu verändern ergibt keine erneute Ausgabe, weil die Referenz des Arrays geprüft wird und nicht dessen Inhalt.</p> <blockquote> <p>Das <code>fetch</code>-Result von Seite 1 würde man dann entweder in einem Caching-Layer cachen oder neu abrufen, wenn der User zu dieser Seite zurück kehrt. Oder beides: erst den gecachten Zustand anzeigen und wenn das <code>fetch</code>-Result da ist dieses anzeigen.</p> </blockquote> <p>Vielleicht, vielleicht auch nicht. Kommt darauf an, wie aktuell die Daten sein sollen und wie schnell sie sich serverseitig ändern.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762672#m1762672 dedlfix 2020-01-07T09:35:53Z 2020-01-07T09:35:53Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Tach!</p> <blockquote> <p>danke. Mir ist leider nicht ganz klar wie das Framework beim Pagination arbeitet.</p> </blockquote> <p>Das Angular-Framework hat damit nichts zu tun, sondern du muss dich informieren, wie diese 3rd-party Pagination-Komponente funktioniert.</p> <blockquote> <p>Ich habe ein currentPage, ein totalItems, ein itemsPerPage und ein Array collection.</p> </blockquote> <p>In <code>collection</code> sind entweder die gesamten Daten, dann aber ohne <code>totalItems</code>, und die Daten der aktuellen Seite werden von der paginate-Pipe daraus gefiltert. Oder <code>totalItems</code> ist gesetzt, dann sind in <code>collection</code> lediglich die Daten der aktuellen Seite.</p> <p>So ist das <a href="https://www.npmjs.com/package/ngx-pagination" rel="nofollow noopener noreferrer">dokumentiert</a>.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762673#m1762673 Christian Kruse https://wwwtech.de/ 2020-01-07T09:36:10Z 2020-01-07T09:36:10Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Hallo dedlfix,</p> <blockquote> <p>Dieser Variable (sprich: Eigenschaft der Component) muss man einen neuen Wert (ein neu erzeugtes Array) zuweisen, damit die Change Detection die Änderung mitbekommt. Daten in dem bestehenden Array lediglich zu verändern ergibt keine erneute Ausgabe, weil die Referenz des Arrays geprüft wird und nicht dessen Inhalt.</p> </blockquote> <p>Naja, na klar, deshalb schrieb ich ja „überschreiben.“ Das ist in React auch so. Sub-Komponenten werden nur neu gerendert, wenn sich ihr State oder ihre Props ändern.</p> <blockquote> <blockquote> <p>Das <code>fetch</code>-Result von Seite 1 würde man dann entweder in einem Caching-Layer cachen oder neu abrufen, wenn der User zu dieser Seite zurück kehrt. Oder beides: erst den gecachten Zustand anzeigen und wenn das <code>fetch</code>-Result da ist dieses anzeigen.</p> </blockquote> <p>Vielleicht, vielleicht auch nicht. Kommt darauf an, wie aktuell die Daten sein sollen und wie schnell sie sich serverseitig ändern.</p> </blockquote> <p>Ja. Deshalb ja „oder.“</p> <p>Freundliche Grüße,<br> Christian Kruse</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762674#m1762674 dedlfix 2020-01-07T09:50:43Z 2020-01-07T09:50:43Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Tach!</p> <blockquote> <blockquote> <p>Dieser Variable (sprich: Eigenschaft der Component) muss man einen neuen Wert (ein neu erzeugtes Array) zuweisen, damit die Change Detection die Änderung mitbekommt. Daten in dem bestehenden Array lediglich zu verändern ergibt keine erneute Ausgabe, weil die Referenz des Arrays geprüft wird und nicht dessen Inhalt.</p> </blockquote> <p>Naja, na klar, deshalb schrieb ich ja „überschreiben.“ Das ist in React auch so. Sub-Komponenten werden nur neu gerendert, wenn sich ihr State oder ihre Props ändern.</p> </blockquote> <p>Ich wollte das nur nochmal hervorheben, dass es nicht nur eine Konvention ist, die man ignorieren könnte, sondern notwendig, damit die Change-Detection ein erneutes Rendern anstößt. hmm hatte ja mit dem Gedanken gespielt, dass Array zu verändern, was aber nicht zielführend ist, und das obendrein weder für die Angular-Mechanismen noch für die Arbeitsweise des verwendeten Paginators. Mir schien, dass ihm dieses Überschreiben-Müssen noch nicht ganz klar war.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762675#m1762675 hmm 2020-01-07T10:05:36Z 2020-01-07T10:05:36Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>habs gerade getestet. das framework arbeitet doch so wie man es braucht. wenn ich das array nach jedem paging event leere und nur die notwendigen daten reinschreibe passt alles.</p> <p>danke!</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762678#m1762678 dedlfix 2020-01-07T10:44:04Z 2020-01-07T10:44:04Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Tach!</p> <blockquote> <p>habs gerade getestet. das framework arbeitet doch so wie man es braucht. wenn ich das array nach jedem paging event leere und nur die notwendigen daten reinschreibe passt alles.</p> </blockquote> <p>Das Array zu manipulieren ist nicht der von Angular vorgesehene Weg. Statt das Array zu leeren, nimm besser ein neues und weise es der collection-Eigenschaft zu (oder wie auch immer die bei die heißt). Der Aufwand ist derselbe. Ich vermute, dass es bei der letzten Seite Probleme gibt, wenn diese weniger Elemente hat.</p> <p>Wenn man es "richtig" macht, würde man allerdings für collection ein Observable von RxJS nehmen und die neuen Daten per next() übergeben.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762690#m1762690 hmm 2020-01-07T14:28:03Z 2020-01-07T17:11:56Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Das RxJS teste ich vielleicht. Vorher muss ich mir aber angucken wie ich das Sortieren der Daten hinkriege. Meine REST API kann mir Daten nach einer bestimmten Spalte sortieren, aber wie ich passende Sorting-Knöpfe im Angular Paging realisiere, muss ich mir noch angucken.</p> <p>Andere kleine Frage:</p> <pre><code class="block language-js"><span class="token keyword">this</span><span class="token punctuation">.</span>httpClient<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/rest/ui/releases?size=15&page='</span> <span class="token operator">+</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>headers <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toPromise</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">//var jsonData = JSON.stringify(data);</span> <span class="token keyword">var</span> countMax <span class="token operator">=</span> data<span class="token punctuation">.</span>headers<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"X-Total-Count"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">15</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">releaseVersion</span><span class="token operator">:</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>releaseVersion<span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>collection<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das Auslesen eines Headerparameters per var countMax = data.headers.get("X-Total-Count"); geht nicht, weil Data kein response ist. Wie ließt man in Angular Headerparameter aus?</p> https://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762691#m1762691 dedlfix 2020-01-07T14:46:18Z 2020-01-07T14:46:18Z Angular 8: NgxPaginationModule soll mit RESt API arbeiten <p>Tach!</p> <blockquote> <p>Das Auslesen eines Headerparameters per var countMax = data.headers.get("X-Total-Count"); geht nicht, weil Data kein response ist. Wie ließt man in Angular Headerparameter aus?</p> </blockquote> <p>Man lese die Dokumentation von HttpClient.get(), welchen Parameter man angeben muss, um die komplette Response zu bekommen und nicht nur die Daten.</p> <p>Außerdem ist es empfehlenswert, toPromise() zu vermeiden, wenn man nicht aus irgendeinem Grund auf Promises angewiesen. RxJS hat mit <code>.subscribe()</code> einen gleichwertigen/einfacheren Weg, den man statt <code>.toPromise().then()</code> verwenden kann.</p> <p>dedlfix.</p>