Angular2：以行/列方式显示项目答案

【问题标题】：Angular2: displaying items in row/column fashionAngular2：以行/列方式显示项目
【发布时间】：2017-03-23 15:17:17
【问题描述】：

我有一个具有以下格式的数组，其中第一个参数是要显示的文本，第二个是列号，第三个是行号。我想根据它们的列和行位置显示这些项目。

[[ "a",  "0", "0"],
["b", "0", "1"],
["c", "0", "2"],
["d", "1", "0"],
["e", "1", "1"],
["f", "2", "0"],
["g", "2", "1"]

]

期望的输出：

a d f
b e g
c

【问题讨论】：

标签： css angular angularjs-directive angular2-template

【解决方案1】：

你可以这样做：Plunker

组件：

  value : string;
  rows : any[];
  cols : any[];
  arr : any = [[ "a",  "0", "0"],
    ["b", "0", "1"],
    ["c", "0", "2"],
    ["d", "1", "0"],
    ["e", "1", "1"],
    ["f", "2", "0"],
    ["g", "2", "1"]];

  constructor() { 
    this.rows = Array(3).fill();
    this.cols = Array(3).fill();
  }

  activeElement(r,c) : string{
    for(let elem of this.arr){
      if(parseInt(elem[1]) === c && parseInt(elem[2]) === r){
        console.log(true);
        return elem[0];
      }
    }
    return ""
  }

模板：

<div *ngFor="let row of rows; let rowId = index">
 <span *ngFor="let col of cols; let colId = index">
   {{activeElement(rowId,colId)}}
 </span>
</div>

【讨论】：

这里我想你是在假设行数和列数。
确实如此。您仍然可以循环尝试在数组中找到较大的 col / row 编号并在构造函数中使用它。
这里如果我想使用 bootstrap 来显示这些项目，比如 3 列网格的“col-md-4”，2 列的“col-md-6”，“col-md-12 " 对于 1 列网格，一旦我知道列数值，我如何动态地实现这一点。在这里，如果我想使用引导程序来显示这些项目，例如 3 列网格的“col-md-4”，2 列的“col-md-6”，1 列网格的“col-md-12”我怎么能一旦我知道列值的数量，就可以动态地实现这一点。
YounesM: 如果我想使用 bootstrap 显示这些项目，例如 3 列网格的“col-md-4”，2 列的“col-md-6”，“col-md” -12" 对于 1 列网格，一旦我知道列数值，我如何动态实现这一点。
@indra257 ：您可以使用ngClass。 <div [ngClass]="{'col-md-4' : colNumber === 3, 'col-md-6' : colNumber === 2}">

【解决方案2】：

你会想看看弹性盒子Flex Box。

基本上你会想要使用基于列的布局。

此外，还有一个 Angular 的组件库可以对此提供声明性帮助：FlexLayout

使用 FlexLayout 你会做这样的事情：

@Component({
  template: `
    <div fxFlexLayout="column" fxLayoutWrap>
      <div fxFlex="30%" *ngFor="let item of items | async">{{ item }}</div>
    </div>
  `
})
export class ItemListComponent implements OnInit {

    items: Observable<Item[]>

    constructor(...) {}

    ngOnInit() {
       this.items = this.service.getItems()
         .map(x => x.[0])
    }

}

【讨论】：

我认为他不想使用 CSS，而是根据数组上的 id 填充 html 网格。