如何使用 Angular 顯示“編輯”鏈接后跟最后一個列表項

Question

列表是動態填充的，每個列表文本的寬度可能會有所不同..它也是從小到大的文本。 在這里我想顯示“編輯”鏈接應該顯示在最后一個列表項之后。 這是我試過的示例代碼

<ul
  class=""
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); let i = index; let test = test11123">
      <span class="day-label">{{ emppData.day }}</span>
      <span *ngIf="emppData.emppData">{{ emppData.empLabel }}</span>
    </li>
     <li *ngIf="isTaestable$ | async">
      <button
        id="idTestButton"
        [disabled]="false"
        buttonSize="md"
        buttonStyle="link"
        aria-label="Edit"
        (click)="testEmpData()"
      >
        {{ edit }}
      </button>
    </li>
  </ng-container>
</ul>

樣本 output：

Sunday AAAA
Monday BBBB
Tuesday CCC. 'Edit'

Answer 1

請使用*ngFor變量。 參考

Maxime Chevallier的其他詳細信息：

為了完成答案， *ngFor 中的 let last = last 是 Angular 給出的 boolean 當元素是數組的最后一個元素時為真。 參考

<ul
  class=""
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); let i = index; let test = test11123;let last = last;">
      <span class="day-label">{{ emppData.day }}</span>
      <span *ngIf="emppData.emppData">{{ emppData.empLabel }}</span>
    </li>
     <li *ngIf="isTaestable$ | async">
      <button
        *ngIf="last"
        id="idTestButton"
        [disabled]="false"
        buttonSize="md"
        buttonStyle="link"
        aria-label="Edit"
        (click)="testEmpData()"
      >
        {{ edit }}
      </button>
    </li>
  </ng-container>
</ul>

Answer 2

添加最后的聲明。 正如您對 let=index 所做的那樣，您可以聲明以下所有變量： index first last even odd

所以你的代碼應該適用於：

<ul
  class=""
  *ngIf=""
>
  <ng-container
    *ngIf="">
    <li *ngFor="let emppData of getEmpData(); 
        let i = index; 
        let test = test11123;
        let last = last">
      <span class="day-label">{{ emppData.day }}</span>
      <span *ngIf="emppData.emppData">{{ emppData.empLabel }}</span>
    </li>
     <li *ngIf="isTaestable$ | async">
      <button *ngIf="last"
        id="idTestButton"
        [disabled]="false"
        buttonSize="md"
        buttonStyle="link"
        aria-label="Edit"
        (click)="testEmpData()"
      >
        {{ edit }}
      </button>
    </li>
  </ng-container>
</ul>

檢查與您相同問題的其他問題： Angular 2 ngfor first, last, index loop