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

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

1 个答案: