angular - *ngFor 指令中自定义项目的排序

Question

这是我的代码：

    <nav>
        <a [routerLink]="item.link"
            *ngFor="let item of links; let lastItem = last;"  
            *ngIf="!lastItem">
            {{item.title}}
        </a>
        <a (click)="clickOnCustomLink()">
            MY CUSTOM LINK
        </a>
        <a *ngIf="links" [routerLink]="links[links.length - 1].link">
            {{links[links.length - 1].title}}
        </a>
    </nav>

由于已知原因，我收到一个错误：

Can't have multiple template bindings on one element

有任何想法吗？

Answer 1

是的，您不能在一个角度元素上使用多个结构指令

而是使用ng-container来运行 for 循环（ng-container 不会在您的 DOM 中呈现）：

<ng-container *ngFor="let item of links; let lastItem = last;"  >
    <a [routerLink]="item.link" *ngIf="!lastItem">
        {{item.title}}
    </a>
<ng-container>

Answer 2

不能在一个元素上添加两个结构指令。创建一个新的ng-container并移动ngFor到那个

   <ng-container [routerLink]="item.link" *ngFor="let item of links; let lastItem = last;" >
        <a [routerLink]="item.link" *ngIf="!lastItem">
               {{item.title}}
         </a> 
    </ng-container>