Can not getting parameters from routing URL

I am doing a todo-list using ionic4 and firebase, I hope I can get lists’ id in my detail page, so when people click list on the home page they could check the detail.

I use ionic4 and firebase, in windows.

this is my routing.ts:

 { path: 'homepage', loadChildren: './pages/Homepage/homepage.module#HpagePageModule' },
   path: 'list-detail/:id',
   canActivate: [AuthGuard]

and here is my list-detail.ts:

import { ActivatedRoute } from '@angular/router';

  selector: 'app-list-detail',
  templateUrl: './',
  styleUrls: ['./'],
export class ListDetailPage implements OnInit {
  public listId :string;
  public currentList: any = {}; 

    private listService:ListService,
    private route:ActivatedRoute,
    ) { }

  ngOnInit() {

    this.listId = this.route.snapshot.paramMap.get('id');

    .then(listSnapshot => {
      this.currentList =; =;

Meanwhile, here is my homepage.html:

    <ion-list-header><ion-label>Your Lists</ion-label></ion-list-header>
      *ngFor="let li of list"
      routerLink="/list-detail/{{ }}"
        <p>Attribution: <strong>{{li?.attribution}}</strong></p>


The thing is that when I clicked the list on my page, it occurred “core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘list-detail’”, when I replaced routerLink in the homepage, it works but obviously no parameters in the detail page. What’s wrong with my routing.ts? I found other people also defined URL in this way. Thanks a lot!

The thing that jumps out at me is this line in homepage.html:

*ngFor="let li of list" routerLink="/list-detail/{{ }}"

Is there a chance that last list wants to be li instead?

1 Like

Yea it’s the problem, so stupid haha thx dude.