2017-02-21 114 views
5

我想根据从数据库接收到的值,在角度2中即时创建div(使用引导类)。例如,我从数据库中获取6个类别,以便在屏幕上将其转换为3个div.row,其中包含2个div.col-md-6。我如何在Angular中编写for循环来执行此操作?Angular 2:动态创建div

编辑:或者问一下,否则,我该如何使用ngFor来创建奇数索引上的元素?

+1

您是否尝试使用* ngFor? – galvan

+0

虽然在迭代到6时,我怎样才能用ngFor创建3个div.row? –

+0

创建一个分为列的管道? – n00dl3

回答

1

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

总之,这里的你如何检查其奇:

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

UPDATE

与给定结构的易TODO:

@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

或使用您的第一个d ata方法和使用管道:

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

+0

只是我有一个自定义对象[{id:1,name:'name1'},{id:2,name:'name2'},{id:3,name:'name3'},{id :4,name:'name4'},{id:5,name:'name5'},{id:6,name:'name6'}] –

+0

我想我需要把它改成[[{id:1 ,名称: 'NAME1'},{ID:2,名称: 'NAME2'}],[{ID:3,名称: 'NAME3'},{ID:4,名称: 'NAME4'}] ,[{id:5,name:'name5'},{id:6,name:'name6'}]]将我从头痛中解救出来 –

+0

用数组中的第二个数组更容易,那是真的! :) – mxii