ich die richtige Praxis wissen müssen, schaffen, in diesem Szenario zu verwenden:Angular2 - Wie eine einfache Tabelle
Ich habe einen WebAPI, die ein tabellarischen Daten-Set zurückzugibt, und ich habe es zu zeigen, mit Bootstrap-Tabellen ...
Wie wird es implementiert? Welche Bootstrap-Komponente sollte ich verwenden?
Die Tabelle ist sehr einfach, setzen Sie es nur wenige Daten und eine Schaltfläche in der Reihe Detail zu gehen ...
Dank
ein Beispiel für einfache Tabelle Hier ist das Sie Details zu Zeile klicken umleitet:
<table class="table table-hover">
<thead>
<tr>
<td>Id</td>
<td>Title</td>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let transfer of transfers" [routerLink]="['/transfer']" [queryParams]="{ id: transfer.id }">
<td>{{transfer.id}}</td>
<td>{{transfer.title}}</td>
<td>{{transfer.amount}}</td>
</tr>
</tbody>
</table>
Ich nehme an, Sie arbeiten mit transfers Array und Redirect basierend auf id.
Das ist genau das, was ich brauche Danke! Nur noch eine Frage: Wie erstelle ich die "Transfer" -Daten? Muss ich die Klasse und den Dienst erstellen, um es zu laden, oder gibt es eine andere schnellere Methode? – DarioN1
Ja, Sie haben absolut recht. Erstellen Sie einen Service, von dem Sie Ihre API aufrufen können, und rufen Sie sie dann von Ihrer Komponentenklasse auf, indem Sie sie dort einfügen. –
Sie sollten wahrscheinlich mit der TransferService-Klasse gehen und es vortäuschen oder Server von dort aufrufen. – borkovski
Sie Bootstrap Winkel 2 Datentabellen verwenden können, unterstützen. überprüfen Sie diese URL
Wenn Sie eine andere Lösung testen möchten, gehen Sie mit Teradata kovalente Datentabelle. Sehen Sie sich diese link
Durch die Verwendung Sie Responsive Design mit einigen mehr zusätzliche Funktionen wie zu bekommen: Suchfunktion, Paginieren
Ich denke, ich muss nur die
können Sie dies tun, indem Sie
Was meinen Sie mit "show it a video"? – gsc
Hi Gsc, ich meine es nur auf einer Webseite darzustellen ... Ich habe meine Frage bearbeitet – DarioN1
Was hast du bisher probiert? Versuchen Sie, [this directory] (https://devarchy.com/angular-components) nach einer Komponente von Drittanbietern zu durchsuchen, die Ihren Anforderungen entspricht, oder erstellen Sie einfach eine einfache Komponente. Bootstrap ist nur eine Reihe von Klassen, mit denen Sie Ihre Tabellen und andere Komponenten formatieren können. Verwenden Sie also die richtigen Klassen mit Ihrem Tabellen-Markup und voila. – GregL