如何使用ngFor将数据显示为矩阵 [英] How to use ngFor to display the data as matrix

问题描述

• 编辑后添加了更多说明*

我是Angular2的新手.我使用"ngFor"来遍历对象数组，并将其显示为每行具有3列的矩阵.例如；

I am new on Angular2. I have use "ngFor" to iterate over array of objects and show them as matrix having 3 columns for each row. For example;

<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>

有人可以帮我吗? 谢谢，

Could anyone help me on this? Thanks,

推荐答案

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

If your data are contained within an array of objects. You could use a custom pipe to iterate over object keys:

@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', ... }
  (...)
];

这篇关于如何使用ngFor将数据显示为矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！