Question

编辑以提供更多说明*

我是Angular2的新手。我用过＆＃34; ngFor＆＃34;迭代对象数组并将它们显示为每行有3列的矩阵。例如;

＆＃13;

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

＆＃13;

有人可以帮我这个吗？谢谢，

Answer 1

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

@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']];
}

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

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

2 个答案: