routerLink not updating correctly when adding new item to list with ngFor-CodePudding

I have a list of items displayed in my Angular template using the ngFor directive. Each item has a dynamic routerLink directive that generates a link to a specific route. When I add a new item to the list and update the ngFor directive, the routerLink directive on the new item does not work correctly and instead redirects me to the root route (http://localhost:4200/) instead of the expected route (e.g. http://localhost:4200/projects/BB/home). How can I fix this issue?

HTML :

    <ng-container *ngFor="let project of projects">
      <div  routerLinkActive="active">
        <div  [routerLink]="'projects/'   project.code   '/home'">
          <span >{{ project.code }}</span>
        </div>
      </div>
    </ng-container>

Projects list is update after create new project and refetch projects, HTML also is update but routerLink of new project not work correctly

If i create new project where code = 'BB'. on this project click i expect app to redirect me to http://localhost:4200/projects/BB/home instead of http://localhost:4200/

CodePudding user response：

try starting your links with a slash, ie [routerLink]="'/projects/' project.code '/home'"

CodePudding user response：

Replace your [routerLink]="'projects/' project.code '/home'" with [routerLink]="['projects/', project.code, '/home']

as below,

<ng-container *ngFor="let project of projects">
  <div  routerLinkActive="active">
    <div  [routerLink]="['projects/', project.code, '/home']">
      <span >{{ project.code }}</span>
    </div>
  </div>
</ng-container>