使“查看更多细节”在 Angular 2/4 中工作答案

【问题标题】：Make "view more detail" work in Angular 2/4使“查看更多细节”在 Angular 2/4 中工作
【发布时间】：2017-09-08 07:26:24
【问题描述】：

我在 Angular 应用程序中使用“查看更多详细信息”功能时遇到问题。这很简单，但我无法获得我点击的某个新闻的详细信息的价值。这就是它的工作原理，首先，您有一个新闻列表，每个新闻都有一个“查看”按钮，可以将您重定向到新页面。如何显示某个新闻的详细信息的价值？问题出在 news-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>

news-list.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);
        });
    }      
}

【问题讨论】：

是否像您完成了 getAllNews 一样？
@Kyrsberg。怎么过滤呢？ getAllNews 将显示新闻列表。我想显示被点击的特定新闻的详细信息。
单条新闻查询没有端点？像这样this.httpClient.get('http://sample/news/${id}')
@Kyrsberg 那么如何过滤呢？

标签： angular angular2-services angular2-http

【解决方案1】：

如果您没有获取单个新闻文章的端点，那么也许这样的方法对您有用。

服务

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

【讨论】：

它说类型对象上不存在属性查找
this.getAllNews().map(listOfNews => listOfNews.find(news => news.id === id)) 期望 getAllNews 方法返回一个数组，但它返回的是对象
它不是 response.json，因为 httpClient 将其解析为 json
我该如何解决这个问题？
我又修改了答案

【解决方案2】：

你有类似 { path: 'news/:id', component: news-detail.component } 的路由吗？

【讨论】：