Dynamisch Tabelle Objekt erstellen in Angular 2

Question

Ich muss dynamisch Tabelle in Winkel 2/Typoskript

erstellen Array von Objekten des Objekts

in Vorlage

export class AppComponent { 
    gameBoard= GAMEBOARD; 
} 

var size=10;//will be for user enter 
var GAMEBOARD=[]; 
var x=0; 
for(var i=0;i<size;i++){ 
for (var j=0; j < size; j++) { 
    if (!GAMEBOARD[i]) {     
     GAMEBOARD[i] = [];    
    } 
    GAMEBOARD[i][j]=new GameField(x); 
    x++; 
}} 

Nutzung erstellen:

<tr *ngFor="let x of gameBoard"> 
    <game-field *ngFor="let field of gameBoard[x]" [field]="field" ></game-field> 
</tr> 

Versuchen Sie folgendes einzugeben:

@Component({ 
    selector: 'game-field', 
// inputs:['field'], 
template: '<td >{{field.id}}</td>', 
    styleUrls: ['./app.component.css'] 
}) 
export class GameFieldComponent{ 
@Input() field: GameField; 
} 

Wie setze ich alle Objekte von GAMEBOARD in die Tabelle?

(Ich bin ein Neuling in Web-Entwicklung und so wenden Sie sich bitte für Stackoverflow Ablass)

Answer 1

Wie Sie custom-element innerhalb tr Tag setzen, würde es ungültig html werden und es wird von Tisch-Tag geworfen. Sie können nur Platz td, th, usw. (nur Tabellenelement in tr) alle anderen Element/custom Element sind nicht erlaubt tr

Vielmehr sollten Sie wiederholen td und erzeugen Inhalte aus game-field Komponente machen. Es könnte ungefähr wie unten aussehen.

Auch korrekte innere ngFor nach Richtlinie Schleife über x statt gameBoard[x]

<tr *ngFor="let x of gameBoard"> 
    <td *ngFor="let field of x"> 
    <game-field [field]="field"></game-field> 
    </td> 
</tr> 

Spielfeldkomponente Vorlage

template: '{{field.id}}', 

Answer 2

Das Problem ist, dass Sie den Export an der Spitze und haben Sie den Spielplan danach neu zu definieren. Sie sollten die

nach oben bewegen.

Auch die Verwendung von const und let anstelle von var würde Ihnen helfen, diese Probleme zu vermeiden.