我想根據從數據庫接收到的值,在角度2中即時創建div(使用引導類)。例如,我從數據庫中獲取6個類別,以便在屏幕上將其轉換爲3個div.row,其中包含2個div.col-md-6。我如何在Angular中編寫for循環來執行此操作?Angular 2:動態創建div
編輯:或者問一下,否則,我該如何使用ngFor來創建奇數索引上的元素?
我想根據從數據庫接收到的值,在角度2中即時創建div(使用引導類)。例如,我從數據庫中獲取6個類別,以便在屏幕上將其轉換爲3個div.row,其中包含2個div.col-md-6。我如何在Angular中編寫for循環來執行此操作?Angular 2:動態創建div
編輯:或者問一下,否則,我該如何使用ngFor來創建奇數索引上的元素?
爲了完全回答你的問題,有必要看看你的對象/數組結構。
總之,這裏的你如何檢查其奇:
<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方法和使用管道:
只是我有一個自定義對象[{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 ,名稱: 'NAME1'},{ID:2,名稱: 'NAME2'}],[{ID:3,名稱: 'NAME3'},{ID:4,名稱: 'NAME4'}] ,[{id:5,name:'name5'},{id:6,name:'name6'}]]將我從頭痛中解救出來 –
用數組中的第二個數組更容易,那是真的! :) – mxii
您是否嘗試使用* ngFor? – galvan
雖然在迭代到6時,我怎樣才能用ngFor創建3個div.row? –
創建一個分爲列的管道? – n00dl3