Найти объект по идентификатору и активированному маршруту

Question

Я использую функцию поиска, чтобы получить доступ к объекту, используя его поле id. Я успешно получил значение id из активированного маршрута. Это код для получения объекта с определенным идентификатором. В качестве ответа я получаю undefined.

export class StoryDetailsComponent implements OnInit {
  story: IStory;
  constructor(private activateRoute: ActivatedRoute) { }
  stories: IStory[] = require('../stories.json');
  ngOnInit(): void {
    this.story = this.loadStoryByFind(this.activateRoute.snapshot.paramMap.get('id'));
    console.log('detail story is ', this.story);
  }

  loadStoryByFind(id) {
    console.log('the stories ', this.stories);
    console.log(' this.stories.find(x => x.id === id: ',  this.stories.find(x => x.id === id));
    return this.stories.find(x => x.id === id);
  }

}

Это то, что отображается в окне консоли:

story-details.component.ts:20 the stories  (4) [{…}, {…}, {…}, {…}]
0: {id: 1, date: "June 21, 2020", author: "Da", pictureUrl: "pic1", title: "Scorching", …}
1:{id: 2, date: "June 21, 2020", author: "Da", pictureUrl: "pic2", title: "Closest Thing To A Saint", …}
2: {id: 3, date: "June 21, 2020", author: "Da", pictureUrl: "pic3", title: "Scorching", …}
3: {id: 4, date: "June 21, 2020", author: "Da", pictureUrl: "pic4", title: "Scorching", …}length: 4__proto__: Array(0)

story-details.component.ts:21  this.stories.find(x => x.id === id:  undefined

story-details.component.ts:16 detail story is  undefined

Answer 1

Сначала вы должны преобразовать идентификатор в число, то, что вы получаете из url, всегда имеет тип строки, и вы сравниваете строку с числом, которое является ложным. попробуйте:

this.story = this.loadStoryByFind(+this.activateRoute.snapshot.paramMap.get('id'));

+ this.activateRoute.snapshot.paramMap.get ('id') - это число this.activateRoute.snapshot.paramMap.get ('id') - это строка