如何使用 ngFor 将数据显示为矩阵答案

【问题标题】：How to use ngFor to display the data as matrix如何使用 ngFor 将数据显示为矩阵
【发布时间】：2016-06-06 11:52:40
【问题描述】：

编辑添加更多描述 *

我是 Angular2 的新手。我已经使用“ngFor”来迭代对象数组并将它们显示为每行有 3 列的矩阵。例如；

<div class="row">
  <div class="col">
    <div class="card"></div>
  </div>
  <div class="col">
    <div class="card"></div>
  </div>
  <div class="col">
    <div class="card"></div>
  </div>
</div>
<div class="row">
...
</div>
<div class="row">
...
</div>

有人可以帮我解决这个问题吗？谢谢，

【问题讨论】：

标签： angular

【解决方案1】：

使用*ngFor，您可以遍历数组。如果数组项是数组，可以嵌套*ngForlike：

@Component({
  selector: '...'
  template: `
<div class="row" *ngFor="let row of matrix">
  <div class="col" *ngFor="let col of row">
   <div class="card">{{col}}</div>
  </div>
</div>
`
})
class Component {
  matrix = [['a', 'b', 'c'],['d', 'e', 'f'],['g', 'h', 'i']];
}

【讨论】：

感谢您的回答。它是对象数组；不是对象数组的数组。如何对其进行迭代以显示每行 3 列（3 个对象）？
这就是蒂埃里的回答所解释的，不是吗？

【解决方案2】：

如果您的数据包含在对象数组中。您可以使用自定义管道来迭代对象键：

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    if (!value) {
      return value;
    }

    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

使用方法如下：

<div class="row" *ngFor="let obj of data">
  <div class="col" *ngFor="let keyValues of obj | keys>
    <div class="card">{{keyValues.key}} = {{keyValues.key}}</div>
  </div>
</div>

使用的数据结构如下：

this.data = [
  { prop1: 'val1 a', prop2: 'val2 a', ... }
  { prop1: 'val1 b', prop2: 'val2 b', ... }
  { prop1: 'val1 c', prop2: 'val2 c', ... }
  (...)
];

【讨论】：

【解决方案3】：

我知道这个问题很老，但我找到了一种方法来对来自单个数组的数据进行 maxtric。

我的数据结构

data = [
    {
          from: 'AB',
          to : 'AB',
          value: true
     }
    {
          from: 'AB',
          to : 'CD',
          value: false
     }
    {
          from: 'CD',
          to : 'AB',
          value: true
     }
    {
          from: 'CD',
          to : 'CD',
          value: false
     }
]

第 1 步

您需要定义列和行标题。在这种情况下，我有相同的行和列值。

subsctractHeads(array) {
    cols = [ ...new Set(array.map(item => item.from)) ]
}

这将给出一个数组cols = ['AB','CD']

第 2 步

在矩阵等表格中显示数据

<table>
    <tr>
         <th></th>
         <th *ngFor="let column of cols" > {{ column }} </th>
    </tr>
    <tr *ngFor="let row of cols" >
         <th> {{ row }} </th>
         <ng-container *ngFor="let dest of cols" >
               <ng-container *ngFor="cell to of data" >
                    <td *ngIf="cell.from === row && cell.to === dest" ></td>
                         {{ cell.value }}
                </ng-container>
         </ng-container>
    </tr>
</table>

应该显示一个简单的矩阵

【讨论】：