Angular / NGX Bootstrap 組件 - 僅將屬性添加到最后一項

Question

我有一個動態列表，它使用 NGX Bootstrap Dropdowns 來顯示 4 組下拉列表。 最后一個列表中的下拉菜單在頁面外被遮擋。 NXG Bootstrap 為這種情況提供了一個dropUp選項。 所以我只想申請最后一項

插入組件的循環如下所示：

過濾器-builder.componet.html

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

在組件內部：

過濾器-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;

過濾器-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>

演示