Faire "voir plus de détails" travailler dans Angular 2/4

Question

J'ai un problème ayant fonction "voir plus de détails" travail dans mon application Angular. C'est assez simple mais je ne peux pas obtenir la valeur des détails d'une certaine nouvelles que j'ai cliqué. Voici comment cela fonctionne, d'abord, vous avez une liste de nouvelles et chaque nouvelles a un bouton "vue" qui peut vous rediriger vers une nouvelle page. Comment puis-je afficher la valeur des détails d'une certaine nouvelle? Le problème est sur les nouvelles-detail.component.ts

news.service.ts

@Injectable() 
export class NewsService { 
    constructor(private httpClient: HttpClient) { 
    } 

getAllNews() { 
    const authToken = localStorage.getItem('auth_token'); 
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json') 
    .set('Authorization', `Bearer ${authToken}`); 

    return this.httpClient 
     .get('http://sample/news/', { headers: headers }) 
     .map(
     (response => response)); 
} 


getNews(index: number) { 

    } 

} 

news-list.component.ts

<div class="card" *ngFor="let newslist of newslists"> 
    <div class="card-header"> <button class=" btn btn-danger pull-right" style="cursor: pointer;" (click)="onViewNewsDetail(newslist.id)">View</button> 
     {{newslist.category}}   
    </div> 
    <div class="card-body"> 
     {{newslist.title}} 
    </div> 
    </div> 

nouvelles liste .component.ts

export class NewsListComponent implements OnInit { 
    newslists: any; 
    constructor(private newsService: NewsService, private router: Router, private route: ActivatedRoute) { } 

    ngOnInit() { 

    this.newsService.getAllNews() 
     .subscribe(
     (data:any) => { 
      console.log(data); 
      this.newslists = data.data.data; 
      console.log(this.newslists); 
     }, 
     error => { 
      alert("ERROR"); 
     }); 
    } 

    onViewNewsDetail(id: number){ 
    console.log(id); 
    this.router.navigate(['news', id]); 
    } 

} 

news-detail.component.ts

export class NewsDetailComponent implements OnInit { 
    id: number; 
    news: number; 

    constructor(private route: ActivatedRoute, 
       private router: Router, 
       private newsService: NewsService) { } 

    ngOnInit() { 
     this.route.params 
     .subscribe((params: Params) => { 
      this.id = +params['id']; 
      // this.news = this.newsService.getNews(this.id); 
     }); 
    }  
} 

Answer 1

Si vous ne possédez pas de point de terminaison pour obtenir un seul article de nouvelles, il se peut que quelque chose comme cela fonctionne pour vous.

service

getNews(id: number) { 
    return this.getAllNews().map((data: any) => data.data.data.find(news => news.id === id)) 
} 

news-detail.component.ts

ngOnInit() { 
    this.route.params 
    .subscribe((params: Params) => { 
     this.id = +params['id']; 
     this.newsService.getNews(this.id) 
     .subscribe(news => this.news = news) 
    }); 
} 

Answer 2

Avez-vous une déroute comme {chemin: 'Nouvelles/: id', composante: nouvelles-detail.component}?