Parameters URL request, undefined

Question

I want to have a button that redirect me to an url like this: task-details/1

For this, in HTML I did something like this:

  <ul *ngFor="let task of tasks" class="list-group list-group-flush">
     <li class="list-group-item">
         {{task.description}} <button class="btn-success" [routerLink]="['/task-details', task.id]"></button>
     </li>
  </ul>

router:

{path: 'task-details/:id', component: TaskDetailComponent}

When I clicked the button, I received: task-details/undefined . For {{task.description}} it appears the correct values. How can I rewrite the routerLink for receive: task-details/1 ?

Answer 1

Try this:

  <ul *ngFor="let task of tasks" class="list-group list-group-flush">
     <li class="list-group-item">
         {{task.description}} <button class="btn-success" routerLink="/task-details/"+task.taskId></button>
     </li>
  </ul>

Answer 2

如果 task.id 不为空，你可以这样尝试 [routerLink]="['/task-details/'+ task.id]"