Angular 2:动态创建div

时间:2017-02-21 13:36:44

标签: html angular for-loop

我想根据从数据库收到的值,在角度2中动态创建div(使用引导类)。例如,我从数据库中获得了6个类别,因此可以在屏幕上转换为3个div.row,里面有2个div.col-md-6。如何在Angular中编写for循环来执行此操作?

编辑:或者问这个问题,如何使用ngFor只在奇数索引上创建元素?

1 个答案:

答案 0 :(得分: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