javascript - Angular 7 - Make Last Item in Array A Link Using ngFor - Stack Overflow

admin管理员组

文章数量:1310126

I have a list of menu items and I want to make the last item in the array a link.

Right now the menu items are built from a ponent, but I'm unsure of how to make the last item in the array a link.

ActionMenuItemponent.html

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

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);
}

I have a list of menu items and I want to make the last item in the array a link.

Right now the menu items are built from a ponent, but I'm unsure of how to make the last item in the array a link.

ActionMenuItem.ponent.html

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

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);
}

• javascript
• angular
• typescript
• angular7
• angular8

Share Improve this question Follow asked Oct 28, 2019 at 5:32 kjampkjamp 36733 gold badges1313 silver badges4444 bronze badges 2

• 1 What exactly do you mean when you say make it a link? – SiddAjmera Commented Oct 28, 2019 at 5:36
• I’m trying to use the router to link to another view in the application – kjamp Commented Oct 28, 2019 at 5:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Angular exposes the following variables which you can make use of:

• first
• last
• even
• index
• odd

So to make the the last item a link you can do this

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

Try like this:

Working Demo

<ng-container *ngFor="let child of line.children;let i=index">

    <actionmenuitem *ngIf="i != (line.children.length-1)" [line]="child" (inWorkspace)="toWorkspace($event)">
    </actionmenuitem>

    <a [routerLink]="[child]" *ngIf="i == (line.children.length-1)">{{child}}</a>
</ng-container>

you just need to fix last flag assignment:

• let isLast = last or
• last as isLast

本文标签： javascriptAngular 7Make Last Item in Array A Link Using ngForStack Overflow