如何显示“编辑”链接后跟使用 Angular 的最后一个列表项

发布于 2025-01-10 15:08:30 字数 847 浏览 0 评论 0原文

列表是动态填充的，每个列表文本的宽度可能会有所不同......它也从小到大的文本。在这里，我想显示“编辑”链接应显示在最后一个列表项之后。这是我尝试过的示例代码

<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>

示例输出：

Sunday AAAA
Monday BBBB
Tuesday CCC. 'Edit'

原文

List is populating dynamically and width of each list text might vary ..it is small to larger text as well. Here I would like to display 'Edit' link should display after the last list item. Here is the sample code I tried

<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>

Sample output:

Sunday AAAA
Monday BBBB
Tuesday CCC. 'Edit'

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

亢潮 2025-01-17 15:08:30

请使用 *ngFor 变量。参考

来自Maxime Chevallier：

为了完成答案，*ngFor 中的 let last = last 是 Angular 给出的布尔值，当element 是数组的最后一个元素。参考

<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>

Please use *ngFor variables. Reference

Additional details from Maxime Chevallier:

To complete the answer, the let last = last in the *ngFor is a boolean given by Angular that is true when the element is the last element of the array. reference

<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>

回复收藏 0 原文

み青杉依旧 2025-01-17 15:08:30

添加最后的声明。正如使用 let=index 所做的那样，您可以声明以下所有变量：
指数
第一的
最后的
甚至
奇怪

所以你的代码应该适用于：

<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 第一个、最后一个、索引循环

Add last declaration. As you have done with let=index, you can declare all the following vars:
index
first
last
even
odd

So your code should work with:

<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>

Check other questions with your same issue:
Angular 2 ngfor first, last, index loop

回复收藏 0 原文

~没有更多了~