使「查看詳細」在角2/4

工作我已經有「查看詳細」功能在我的角度應用工作的問題。這很簡單，但我無法獲得我點擊某個新聞的詳細信息的價值。這是它的工作原理，首先，你有一個新聞列表，每個新聞都有一個「查看」按鈕，可以將你重定向到一個新頁面。我如何顯示某個新聞的詳細信息的價值？問題是，在新聞detail.component.ts使「查看詳細」在角2/4

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) { 

    } 

}

新聞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>

的新聞列表.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]); 
    } 

}

新聞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); 
     }); 
    }  
}

來源

2017-09-08 Joseph

做到像你已經完成了getAllNews？ – Kyrsberg

@Kyrsberg。如何過濾它？ getAllNews將顯示新聞列表。我想顯示被點擊的具體新聞的詳細信息。 – Joseph

查詢單條新聞沒有端點嗎？像這樣的'this.httpClient.get（'http：// sample/news/$ {id}'）' – Kyrsberg

如果你沒有端點得到一個單一的新聞文章，所以也許這樣的事情會爲你工作。

服務

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

新聞detail.component.ts

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

來源

2017-09-08 08:36:12 Kyrsberg

它說，物業找不上對象類型 – Joseph

'this.getAllNews（）。地圖（listOfNews => listOfNews.find（新聞=> news.id === ID））存在'期待的是'getAllNews'方法返回一個數組，但它返回對象 – Kyrsberg

它不被response.json因爲HttpClient的解析它作爲JSON – Joseph

你有沒有像路由路徑{： '新聞/ ：ID'，成分：新聞detail.component}？

來源

2017-09-08 07:58:56 Eliseo

路由已經完成 – Joseph

使「查看詳細」在角2/4

回答

相關問題