Bootstrap-Tabelle kann nicht in eine Angular 2-Komponente eingefügt werden

Question

Ich entwickle eine Angular 2-Webanwendung mit ASP.NET 5. Ich möchte eine Tabelle in eine Komponente einfügen. Die Tabelle wird mit dieser Bibliothek erstellt: http://bootstrap-table.wenzhixin.net.cn/. Ich habe festgestellt, dass es nicht funktioniert, wenn sich die Tabelle in einer Komponente befindet. Wenn es in der Datei index.html gefunden wird, funktioniert es. Das liegt vielleicht daran, dass die Links zu den Dateien bootstrap-table.css und bootstrap-table.js im Index liegen, aber die index.html sollte nur die root-Komponente enthalten, also muss ich einen Weg finden, den Tabellenarbeit, selbst wenn es in einer Komponente ist. Dies ist der Code der Tabelle:

<table data-toggle="table" data-url="data1.json" data-height="299"> 
    <thead> 
     <tr> 
      <th data-field="id">Item ID</th> 
      <th data-field="name">Item Name</th> 
      <th data-field="price">Item Price</th> 
     </tr> 
    </thead> 
</table> 

Der Code korrekt sein sollte, weil es von hier kopiert wurde: http://www.redexperu.com/assets/js/bootstrap-table-master/docs/examples.html.

Answer 1

wenn Sie den Quellcode des Plugins (Bootstrap-table.js) lesen, werden Sie feststellen, dass, wirklich am Ende, folgenden Code Bootstrap alle Tabelle bereits in dem DOM:

$(function() { 
    $('[data-toggle="table"]').bootstrapTable(); 
}) 

Wenn Sie verwenden angular1 (mit routing) oder angular2 (mit Komponenten) höchstwahrscheinlich ist die Tabelle nicht im DOM, bis angular2 es erfordert.

Was können Sie tun ist, um manuell die bootstrapTable() Funktion in dem Verfahren ngAfterViewInit aufrufen (https://angular.io/api/core/AfterViewInit#interface-overview)