我有一个动态列表,该列表使用NGX引导程序下拉列表显示4组下拉列表。最后一个列表中的下拉菜单会在页面外被遮盖。 NXG Bootstrap在这种情况下提供了dropUp选项。所以我想申请仅最终商品
这里插入组件的循环看起来像:
filter-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”仅添加到组件的最后一个实例?
您可以在last
中使用*ngFor
,如下所示:
filter-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>