Angular / NGX Bootstrap 组件 - 仅将属性添加到最后一项

Question

我有一个使用 NGX Bootstrap 下拉列表显示 4 组下拉列表的动态列表。最后一个列表中的下拉列表在页面外被遮挡。 NXG Bootstrap 为这种情况提供了 dropUp 选项。所以我只想申请 最终项目

插入组件的循环如下所示：

过滤器-builder.componet.html

 <div *ngFor="let settingsService of _settingsServices">
        <filter-builder-item [settingsHelperService]="settingsService"></filter-builder-item>
    </div>

和组件内部：

filter-builder-item.componet.html

<div class="btn-group" dropdown [dropup]="isDropup">
    <ul *dropdownMenu class="dropdown-menu">
        <li role="menuitem"><a class="dropdown-item" href="javascript:;">
            <i class="la la-save"></i>Update</a>
        </li>
        <li role="menuitem"><a class="dropdown-item" href="javascript:;">
            <i class="la la-save"></i>Save</a>
        </li>
    </ul>
</div

如何仅将 [dropup]="isDropup" 添加到组件的最后一个实例？

Answer 1

您可以在 *ngFor 中使用 last，像这样：

过滤器-builder.component.html:

 <div *ngFor="let settingsService of _settingsServices; last as last">
   <filter-builder-item
     [settingsHelperService]="settingsService"
     [dropup]="last"></filter-builder-item>
 </div>

filter-builder-item.component.ts:

@Input() dropup: boolean;

filter-builder-item.component.html:

<div class="btn-group" dropdown [dropup]="dropup">
  <ul *dropdownMenu class="dropdown-menu">
    <li role="menuitem"><a class="dropdown-item" href="javascript:;">
      <i class="la la-save"></i>Update</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="javascript:;">
      <i class="la la-save"></i>Save</a>
    </li>
  </ul>
</div>

DEMO

Angular / NGX Bootstrap 组件 - 仅将属性添加到最后一项

Angular / NGX Bootstrap component - add attribute to last item only

html

javascript

typescript

ngx-bootstrap

angular