Wie erzeuge ich eine Tabelle in angular 2

-2

Ich erstelle eine Tabelle in eckig, Wie kann ich neue Zeile in Tabelle mit anderen Daten generieren, zum Beispiel habe ich diesen Code in reinen Js. Ich bin in der Lage, beim Aufruf der Methode addRow() eine neue Zeile zu generieren. Ich bin neu zu eckig und mir ist klar, dass dies kein eckiger Weg ist. Kannst du mir bitte helfen Wie kann ich dasselbe in eckigen erreichen. Alles ist in Ordnung, aber ich steckte fest, weil mir klar ist, dass ich keinen Knopf in Zeile row.insertCell(5).innerHTML= '<button (click)="deleteFunc()">click</button>'; erstellen konnte, das funktionierte nicht.Wie erzeuge ich eine Tabelle in angular 2

addRow(){ 
 
    let table = document.getElementById("tableData"); 
 
    let rowcount = table.rows.length; 
 
    let row = table.insertRow(rowcount); 
 
     
 
    row.insertCell(0).innerHTML= rowcount; 
 
    row.insertCell(1).innerHTML= this.qty; 
 
    row.insertCell(2).innerHTML= this.log; 
 
    row.insertCell(3).innerHTML= this.kw; 
 
    row.insertCell(4).innerHTML= this.frame; 
 
    row.insertCell(5).innerHTML= '<button (click)="deleteFunc()">click</button>'; 
 
    }

<table id="tableData" border="1" > 
 
    <tr> 
 
    <th>S.No.</th> 
 
    <th>Qty</th> 
 
    <th>Type Refrence</th> 
 
    <th>KW Rating</th> 
 
    <th>Frame Size</th> 
 
    <th>Operation</th> 
 
    </tr> 
 
</table>

Quelle

2017-09-11 Mukul Sharma

Suchen Sie nach 'ngfor' in https://angular.io/guide/template-syntax. Bitte überprüfen Sie die grundlegenden Tutorials, bevor Sie Fragen stellen. –

In welcher Sprache ist es geschrieben? – Aravind

Konnte es nicht besser gesagt haben! Sie müssen Angular ** lernen, bevor Sie Fragen stellen. Dies ist ein hilfreiches Forum, kein Lernforum! – trichetriche

Dies ist so viel einfacher, in Angular. Sie müssen Ihre Daten nur in einem Array speichern. Dann können Sie über *ngFor über es iterieren.

TS:

rows: any = [{ 
    number: 0, 
    qty: 'somevalue', 
    log: 'somevalue', 
    kw: 'somevalue', 
    frame: 'somevalue' 
},{ 
    number: 1, 
    qty: 'somevalue2', 
    log: 'somevalue2', 
    kw: 'somevalue2', 
    frame: 'somevalue2' 
}];

Vorlage:

<table id="tableData" border="1" > 
    <tr> 
    <th>S.No.</th> 
    <th>Qty</th> 
    <th>Type Refrence</th> 
    <th>KW Rating</th> 
    <th>Frame Size</th> 
    <th>Operation</th> 
    </tr> 
    <tr *ngFor="let row of rows"> 
    <td>{{row.number}}</td> 
    <td>{{row.qty}}</td> 
    <td>{{row.log}}</td> 
    <td>{{row.kw}}</td> 
    <td>{{row.frame}}</td> 
    <td><button (click)="deleteFunc()">click</button></td> 
    </tr> 
</table>

Quelle

2017-09-11 07:59:28

Sie Javascript verwenden Tabellen zu handhaben, die nicht notwendig ist.

Um Grids zum Anzeigen von Daten in Angular zu verwenden, können Sie Grid-Steuerelemente von Drittanbietern verwenden, die sehr effektiv und einfach zu verwenden sind.

überprüfen diese:

NgPrime

https://www.primefaces.org/primeng/#/datatable

Quelle

2017-09-11 07:54:38

Wie erzeuge ich eine Tabelle in angular 2

Antwort

Verwandte Themen