行番号と列番号に基づいてテーブルを作成し、それを入力します

Question

私はarrayと2つのプロパティを持つオブジェクトを持っています。 rowsおよびcolumns。私はこれらの2つのプロパティに基づいてテーブルを描画し、myObjectの配列要素をその中に埋めたいと思います。しかし、プロパティはオブジェクトから別のオブジェクトに変わるので、これは動的になります。

例えば可能な組み合わせは次のようになります。

myObject.array = ["x1","x2","x3","x4"]; 

myObject.rows = 2; 
myObject.columns = 2; 
// then draw this table 
----------- 
| x1 | x2 | 
----------- 
| x3 | x4 | 
----------- 
    OR 
myObject.rows = 1; 
myObject.columns = 4; 
// then draw this table 
--------------------- 
| x1 | x2 | x3 | x4 | 
--------------------- 
    OR 
myObject.rows = 4; 
myObject.columns = 1; 
// then draw this table 
------ 
| x1 | 
------ 
| x2 | 
------ 
| x3 | 
------ 
| x4 | 
------ 
    OR 
myObject.array = [12 elements]  
myObject.rows = 3; 
myObject.columns = 4; 
..................... 

私もngForと数字によってループにパイプしました：

@Pipe({name: 'fill'}) 
export class FillPipe implements PipeTransform { 
    transform(value) { 
    let number = new Array(); 

    for (var i = 0; i < value; i++) { 
     number.push(i); 
    } 

    return number; 
    } 
} 

あなたは正しい方向に私を導くことはできますか？

Answer 1

私は同様の質問がここで答えられたことを発見しました：How to use Angular2 templates with *ngFor to create a table out of nested arrays?