Динамически создать таблицу объекта в угловых 2

мне нужно динамически создать таблицу объекта в угловом 2/машинописьДинамически создать таблицу объекта в угловых 2

Создать массив объектов

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++; 
}}

Использование в шаблоне:

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

Попробуйте ввести:

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

Как поместить весь объект из GAMEBOARD в таблицу?

(Я новичок в веб-разработки и Stackoverflow поэтому, пожалуйста, о снисхождении)

источник

2016-12-10 tyskocz

Как вы размещаете custom-element внутри тега tr, это станет недействительным html, и оно будет выбрано из таблицы. Вы можете разместить только td, th и т.д. (только элемент таблицы в tr) все другие элементы/пользовательский элемент не допускаются в tr

Скорее вы должны повторить td и генерировать содержимое из game-field компонента. Он может выглядеть примерно так.

Также правильная внутренняя ngFor директива петли над x вместо gameBoard[x]

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

Шаблона компоненты игры поле

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

источник

2016-12-10 11:12:44

не работает - HTML не генерируется, я думаю, что эта линия не так <тд * ngFor = "let поле gameBoard [x]">, но я не знаю, как это исправлено. Когда я пытаюсь использовать GameBoard без [x] таблицы, вы можете посмотреть в корне (конечно, без значения поля). template: '{{field.id}}' в компоненте игрового поля – tyskocz

Мой плохой, вы правы, проверьте обновленный ответ –

он работает, спасибо большое. – tyskocz

Проблема заключается в том, что у вас есть экспорт в верхней части, и вы переопределить GameBoard после этого. Вы должны переместить

var GAMEBOARD = [];

Наверх.

Кроме того, использование const и let вместо var поможет избежать этих проблем.

источник

2016-12-10 11:02:04 norbertk

Динамически создать таблицу объекта в угловых 2

ответ

Смежные вопросы