如何使用Bootstrap/Angular2動態創建行和列？

根據內容數組的動態大小，我需要將* ngFor和從組件插入的內容放入我的DOM中。如何使用Bootstrap/Angular2動態創建行和列？

我試圖達到這樣的結構：lg-12上有3個元素的行，md/sm上的2個元素和xs上的1個元素，事先不知道有多少事件項將從列表中抽出後端查詢。靜態編碼，例如它看起來像這樣一行，但如果我添加第二行，然後當它在md/sm上摺疊爲2時，一行上有2個元素，第二行上有一個元素，而重複而不是2個元素在每條線上，所以它看起來愚蠢。

<div class="eventList container-fluid" id="eventList"> 
     <div class="row"> 
      <div class="col-lg-12"> 
        <app-event [event]="event"></app-event> 
        <app-event [event]="event"></app-event> 
        <app-event [event]="event"></app-event> 
      </div> 
     </div> 
    </div>

，其中每個元素的應用程序事件元素是：

<div class="col-md-4 col-sm-6 col-xs-12 single-event-item eventResult"> 
    ... content 
    </div>

來源

2017-02-03 seanEd

試試這個：

模板

<div class="eventList container-fluid" id="eventList"> 
    <div class="row"> 
     <div class="col-lg-12"> 
       <app-event *ngFor="let event of events" [event]="event"></app-event> 
     </div> 
    </div> 
</div>

組件（您找回您的事件）

這是一個例子，因爲你沒有提到你如何檢索你的事件。

add(event): void { 
    this.someService.create(event) 
     .then(event => { 
     this.events.push(event); //update your array of events 
     }); 
    }

來源

2017-02-03 09:48:37 mickdev

謝謝！雅模板代碼是非常接近我寫和未測試（div class =「col-lg-12」，app-event * ngFor =「讓事件事件」[事件] =「事件」/應用程序事件）但我對bootstrap非常缺乏經驗，所以我認爲它會給我帶來麻煩，因爲無法區分何時一行結束和下一個開始，但如果你只是傳遞一大堆列項目，我想這是有效的。 – seanEd

如何將您的答案標記爲此主題的答案？我看不到有這樣的按鈕？也許我的名譽太低，無法訪問該功能。 – seanEd

我不知道。如果答案解決你的問題，那就是所有重要的事情:) – mickdev

如何使用Bootstrap/Angular2動態創建行和列？

回答

相關問題