Angular 7 - 使用 ngFor 将数组中的最后一项设为链接

kja*_*amp 4 javascript typescript angular angular7 angular8

我有一个菜单项列表,我想将数组中的最后一项设为链接。

现在,菜单项是从组件构建的,但我不确定如何使数组中的最后一项成为链接。

ActionMenuItem.component.html

  <div *ngIf="expanded">
  <actionmenuitem *ngFor="let child of line.children" [line]="child" (inWorkspace)="toWorkspace($event)"></actionmenuitem>
Run Code Online (Sandbox Code Playgroud)

ActionMenuItem.Component.ts

  onSelect(){
// If it has children, expand them && flip carat.
if(this.line.children.length > 0){

  this.expanded = !this.expanded;

  if(this.iconName == "expand_more"){
    this.iconName = "expand_less"
  } else {
    this.iconName = "expand_more"
  }

} else {
  this.inWorkspace.emit(this.line);
}
Run Code Online (Sandbox Code Playgroud)

小智 5

Angular 公开了您可以使用的以下变量:

  • 第一的
  • 最后的
  • 甚至
  • 指数
  • 奇怪的

因此,要使最后一项成为链接,您可以这样做

<div *ngFor="let child of line.children; let last = islast">
   <actionmenuitem *ngIf="islast" [line]="child" 
(inWorkspace)="toWorkspace($event)">
    </actionmenuitem>
</div>
Run Code Online (Sandbox Code Playgroud)