CODEWITHSUNDEEP
angulartypescript
user13399152
user13399152

Reputation:

I am struggling to get path to display

const routes: Routes = [
    { path: '', redirectTo: '/students', pathMatch: 'full' },
    {
       path: 'students',
       component: StudentsComponent,
       children: [
           { path: '', component: StudentSignupComponent },
           { path: 'all-students', component: AllStudentsComponent },
           { path: ':id', component: StudentComponent}
       ]
    },

      <ul *ngFor="let student of students; let i = index" class="list-group">
    <a [routerLink]="[i]">e

If I use this code it gives me an error saying:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'students/all-students/0'

How can I fix this?

Upvotes: 0

Views: 94

Answers (4)

user13420148
user13420148

Reputation:

Maybe try this? Although I'm not sure 

const routes: Routes = [
    { path: '', redirectTo: '/students', pathMatch: 'full' },
    {
       path: 'students',
       component: StudentsComponent,
       children: [
           { path: '0', component: StudentSignupComponent },
           { path: 'all-students', component: AllStudentsComponent },
           { path: ':id = 0', component: StudentComponent}
       ]
    },

      <ul *ngFor="let student of students; let i = index" class="list-group">
    <a [routerLink]="[i]">

Upvotes: 0

Girgis A.Jacoub
Girgis A.Jacoub

Reputation: 96

You may enhance the structure of your routes like the comment before me as following

const routes: Routes = [
  { path: '', redirectTo: '/students', pathMatch: 'full' },
  {
    path: 'students',
    component: StudentsComponent,
    children: [
      {
        path: 'all-students', component: AllStudentsComponent,
        children: [ { path: ':id', component: StudentComponent} ]
      }
      { path: '', component: StudentSignupComponent, patchMatch:'full' },
    ]
  }
];

then write the list of students with *ngFor in your all-students component as the following

<ul class="list-group">
  <li *ngFor="let student of students; let i = index">
    <!-- <a [routerLink]="'/' + student.id">{{ student.name }}</a> -->
    <a routerLink="/{{ student.id }}">{{ student.name }}</a>
    <!-- You can also use full route -->
    <!-- <a routerLink="/students/all-students/{{ student.id }}">{{ student.name }}</a> -->
  </li>
</ul>

That in case your students list is an array of objects

students = [
  { name: "Girgis", age: 26, id: "e772df14-e19e-45cf-8961-c2f0b701a61b" },
  { name: "Bernhardt du Toit", age: 26, id: "0401306b-5919-4c2d-b25f-6e8ff389b8aa" }
];

Upvotes: 2

Alexey Sviridov
Alexey Sviridov

Reputation: 68

You should use path 'students/0' for student with id = 0

Upvotes: 0

Aravind
Aravind

Reputation: 41571

You should be using the :id as a children to all-students as below,

const routes: Routes = [
{ path: '', redirectTo: '/students', pathMatch: 'full' },
{
path: 'students',
component: StudentsComponent,
children: [
  {
    path: 'all-students', component: AllStudentsComponent,
    children: [
    { path: ':id', component: StudentComponent}
  ]},
  { path: '', component: StudentSignupComponent, patchMatch:'full' },
]
},

It's always advisable to use a empty route with patchMatch:full as they will be rendered only if there is complete match

Upvotes: 0

Related Questions