如何使用 Bootstrap/Angular2 动态创建行和列？

Question

我需要使用 *ngFor 并将内容从组件插入到我的 DOM 中，具体取决于内容数组的动态大小。

我正在尝试实现这种结构：一行在 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>

其中每个元素app-event元素是：

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

Answer 1

试试这个：

模板

<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
      });
  }