tag:forum.selfhtml.org,2005:/selfAngular 8: NgxPaginationModule soll mit RESt API arbeiten – SELFHTML-Forum2020-01-07T14:46:18Zhttps://forum.selfhtml.org/self/2020/jan/06/angular-8-ngxpaginationmodule-soll-mit-rest-api-arbeiten/1762649#m1762649hmm2020-01-06T15:44:31Z2020-01-06T15:44:31ZAngular 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#m1762650dedlfix2020-01-06T17:46:02Z2020-01-06T17:46:02ZAngular 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#m1762667hmm2020-01-07T09:02:23Z2020-01-07T09:02:23ZAngular 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#m1762668hmm2020-01-07T09:05:56Z2020-01-07T09:05:56ZAngular 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#m1762669Christian Krusehttps://wwwtech.de/2020-01-07T09:08:48Z2020-01-07T09:08:48ZAngular 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#m1762670hmm2020-01-07T09:26:14Z2020-01-07T09:26:14ZAngular 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#m1762671dedlfix2020-01-07T09:29:56Z2020-01-07T09:29:56ZAngular 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#m1762672dedlfix2020-01-07T09:35:53Z2020-01-07T09:35:53ZAngular 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#m1762673Christian Krusehttps://wwwtech.de/2020-01-07T09:36:10Z2020-01-07T09:36:10ZAngular 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#m1762674dedlfix2020-01-07T09:50:43Z2020-01-07T09:50:43ZAngular 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#m1762675hmm2020-01-07T10:05:36Z2020-01-07T10:05:36ZAngular 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#m1762678dedlfix2020-01-07T10:44:04Z2020-01-07T10:44:04ZAngular 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#m1762690hmm2020-01-07T14:28:03Z2020-01-07T17:11:56ZAngular 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#m1762691dedlfix2020-01-07T14:46:18Z2020-01-07T14:46:18ZAngular 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>