Angular 2：动态创建 div答案

【问题标题】：Angular 2: create divs dynamicallyAngular 2：动态创建 div
【发布时间】：2017-02-21 13:36:43
【问题描述】：

我想根据从数据库收到的值在 Angular 2 中动态创建 div（使用引导类）。例如，我从 db 中获得 6 个类别，因此屏幕上会转换为 3 个 div.row，其中包含 2 个 div.col-md-6。如何在 Angular 中编写一个 for 循环来做到这一点？

编辑：或者问这个问题，我如何使用 ngFor 仅在奇数索引上创建元素？

【问题讨论】：

你试过使用 *ngFor 吗？
当迭代到 6 时，如何使用 ngFor 只创建 3 个 div.row？
创建一个分成多列的管道？
你能用管道写出正确的ngFor语法吗？

标签： html angular for-loop

【解决方案1】：

为了完全回答您的问题，有必要查看您的对象/数组结构。

不管怎样，这里是你检查它是否奇怪的方法：

<div *ngFor="let x of anyArray; let even = even; let odd = odd">
   <div *ngIf="odd">odd</div>
   <div *ngIf="even">even</div>
</div>

更新

使用给定的结构很容易做到：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngFor="let row of data" class="any class you want here">
        <div *ngFor="let item of row" class="any class you want">
          {{ item.id + ': ' + item.name }}
        </div>

        <br /> <!-- just to demonstrate a visual effect here! :) -->
      </div>

    </div>
  `,
})
export class App {
  name:string;

  data = [
    [{id:1,name:'name1'},{id:2,name:'name2'}],
    [{id:3,name:'name3'},{id:4,name:'name4'}],
    [{id:5,name:'name5'},{id:6,name:'name6'}]
  ];

  constructor() {
    this.name = 'Angular2'
  }
}

现场演示：https://plnkr.co/edit/XjS25h19Rjny4N6OVhN1?p=preview

或者使用您的第一个数据方法并使用管道：

现场演示：https://plnkr.co/edit/8P15VdkWS4Oy02Ezevpp?p=preview

【讨论】：

只是我有一个包含一些自定义对象的数组，[{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name: 'name3'},{id:4,name:'name4'},{id:5,name:'name5'},{id:6,name:'name6'}]
我想我需要把它改成 [[{id:1,name:'name1'},{id:2,name:'name2'}],[{id:3, name:'name3'}‌,{id:4,name:'name4'}‌],[{id:5,name:'name5'}‌,{id:6,name:'name6'} ‌]] 让我免于头痛
使用数组中的第二个数组方法更容易，这是真的！ :)
欢迎您！也可以随意问任何其他问题。