Qfyilyi

Here i have multiple list of users. that users id is like(1,2,3,4,5....), click on button it shows first user details after that click on second user details button it shows second user details this is the functionality I want.

but when I click on second user details button, the url is changed but still the second user details does not show, it shows the first user details. So how do I route on same page using userid.

app-routing.module.ts

{ path: 'details/:userid', component : DetailsComponent}

details.component.html

<button mat-raised-button routerLink="details/{{userObj.userid}}">View<button>

details.component.ts

userObj: User = ;



constructor(private userService : UserService,private : ActivatedRoute){}



ngOnInit() {  

  const userid= +this.route.snapshot.paramMap.get('userid');    

  this.userService.getUsersDetails({'userid' : userid}).subscribe(

    (data) => {

      if(data.payload != undefined && data.payload != ''){

        this.userObj= data.payload;

      }

    }

  )

}

I think the real issue here is that you're using snapshot.paramMap. If you use snapshot.paramMap, you won't get the updated state params in most of the cases.

To fix that, just subscribe to the route.params Observable. You'll get params on subscription, which you can use to get the userid. Just give this a try:

ngOnInit() {

  this.route.params.subscribe(params => {

    userid = params['userid'];

    this.userService.getUsersDetails({

      'userid': userid

    }).subscribe(data => {

      if (data.payload != undefined && data.payload != '') {

        this.userObj = data.payload;

      }

    });

  });

}

I think string interpolation doesn't work when you dont bind to routerLink.

try this:

<button mat-raised-button [routerLink]="['details', userObj.userid]">View<button>


you didn't sharing your code source or what you already tried but try this depends on what you described

HTML

<ng-container *ngFor="let userId in userObj">

  <button mat-raised-button routerLink="[ '/details', userId]">View<button>

</ng-container>

you have to loop on userObj array the problem is you not iterate on the array of userObj so when you execute this routerLink="details/{{userObj.userid}}" it takes the same user id on all buttons.

As I understood, this.userService.getUsersDetails() is not taking any user id as input and hence you are always getting the same data for any user id link.

It should be like this.userService.getUsersDetails(userId)

userId: string;

    constructor(private route: ActivatedRoute) {

    }



    ngOnInit() {

        this.route.paramMap

            .pipe(switchMap((params: ParamMap) => {

                const userId = params.get("userId");



                this.userService.getUsersDetails(userId).subscribe((data) => {

                    if (data.payload != undefined && data.payload != '') {

                        this.userObj = data.payload;

                    }

                }, (errorResponse) => {

                });

                return of(params);

            }))

            .subscribe();

    }

Please try with below code and amendment changes according in your component and service.

Step 1: Router Link sample

<a [routerLink]="['/details/1']">User Detial</a>

Step 2: Service created with sample data.

import { Injectable } from '@angular/core';

import { Observable, of } from 'rxjs';



@Injectable({

  providedIn: 'root'

})

export class ContactsService {



  contacts: Contact = ;

  constructor() {

    this.contacts.push({ id: 1, name: 'A' });

    this.contacts.push({ id: 2, name: 'B' });

    this.contacts.push({ id: 3, name: 'C' });

    this.contacts.push({ id: 4, name: 'D' });



  }

  getContact(id: number): Observable<Contact> {

    return of(this.contacts.find(x => x.id == id));

  }

}



export class Contact {

  name: string;

  id: number;

}

Step 3: Created HTML for displaying user id and name.

<p>{{contact.id}}: {{contact.name}}</p>

<input type="button" (click)="onNext()" value="Next">

Step 4: User-detail component

import { Component, OnInit } from '@angular/core';

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

import { map } from 'rxjs/operators'

import { ContactsService, Contact } from '../contacts.service';



@Component({

  selector: 'app-user-detail',

  templateUrl: './user-detail.component.html',

  styleUrls: ['./user-detail.component.css']

})

export class UserDetailComponent implements OnInit {

  contact: Contact;

  userId: number;

  constructor(private route: ActivatedRoute, private router: Router, private contactsService: ContactsService) { }



  ngOnInit() {

    this.route.params

      .pipe(map(params => params['userid']))

      .subscribe((id) => {

        this.userId = id;

        this.contactsService

          .getContact(id)

          .subscribe(contact => this.contact = contact);

      });

  }



  onNext() {

    let id = parseInt(this.userId.toString()) + 1;

    this.router.navigate(['/details/' + id]);

  }

}