Из за чего может быть ошибка(Angular2)?

Question

[Umid]

Добрый день.
Есть приложение. КОД ЗДЕСЬ!
Два раздела - Home и Phrases. Интересует Phrases.
В компонент Phrases приставлен компонент PhraseList, который отображает весь список фраз из сервиса phrasesService.ts в папке services.
В итоге выглядит так:

Так же есть компонент PhraseDetailsComponent, который по клику на отдельный элемент списка из phraseList показывает более подробную информацию + меняется маршрут по id фразы. Т.е. Phrases/1 или Phrases/2 etc.
Но в моём случае, по клику на отдельную фразу, получаю ошибку.

Вся ошибка

core.umd.js:3467 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3467
next @ core.umd.js:6924
schedulerFn @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:236
Zone.runGuarded @ zone.js:131
_loop_1 @ zone.js:412
drainMicroTaskQueue @ zone.js:421
ZoneTask.invoke @ zone.js:339
core.umd.js:3468 Error: Uncaught (in promise): Error: Error in localhost:3000/app/phrases/phraseDetails/phraseDet... caused by: Cannot read property 'language' of undefined
TypeError: Cannot read property 'language' of undefined
at _View_PhraseDetaildComponent0.detectChangesInternal (PhraseDetaildComponent.ngfactory.js:42)
at _View_PhraseDetaildComponent0.AppView.detectChanges (core.umd.js:9566)
at _View_PhraseDetaildComponent0.DebugAppView.detectChanges (core.umd.js:9671)
at _View_PhraseDetaildComponent_Host0.AppView.detectViewChildrenChanges (core.umd.js:9592)
at _View_PhraseDetaildComponent_Host0.detectChangesInternal (PhraseDetaildComponent_Host.ngfactory.js:31)
at _View_PhraseDetaildComponent_Host0.AppView.detectChanges (core.umd.js:9566)
at _View_PhraseDetaildComponent_Host0.DebugAppView.detectChanges (core.umd.js:9671)
at ViewRef_.detectChanges (core.umd.js:7668)
at RouterOutlet.activate (router.umd.js:3451)
at ActivateRoutes.placeComponentIntoOutlet (router.umd.js:2969)
at resolvePromise (zone.js:468)
at zone.js:445
at ZoneDelegate.invoke (zone.js:232)
at Object.onInvoke (core.umd.js:6242)
at ZoneDelegate.invoke (zone.js:231)
at Zone.run (zone.js:114)
at zone.js:502
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (core.umd.js:6233)
at ZoneDelegate.invokeTask (zone.js:264)
ErrorHandler.handleError @ core.umd.js:3468
next @ core.umd.js:6924
schedulerFn @ core.umd.js:6172
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238
SafeSubscriber.next @ Subscriber.ts:190
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:6164
onError @ core.umd.js:6388
onHandleError @ core.umd.js:6263
ZoneDelegate.handleError @ zone.js:236
Zone.runGuarded @ zone.js:131
_loop_1 @ zone.js:412
drainMicroTaskQueue @ zone.js:421
ZoneTask.invoke @ zone.js:339
zone.js:388 Unhandled Promise rejection: Error in localhost:3000/app/phrases/phraseDetails/phraseDet... caused by: Cannot read property 'language' of undefined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {_nativeError: Error: Error in localhost:3000/app/phrases/phraseDetails/phraseDet... ca…, originalError: TypeError: Cannot read property 'language' of undefined
at _View_PhraseDetaildComponent0.detectC…, context: DebugContext} TypeError: Cannot read property 'language' of undefined
at _View_PhraseDetaildComponent0.detectChangesInternal (PhraseDetaildComponent.ngfactory.js:42:72)
at _View_PhraseDetaildComponent0.AppView.detectChanges (localhost:3000/node_modules/@angular/core/bundles/...
at _View_PhraseDetaildComponent0.DebugAppView.detectChanges (localhost:3000/node_modules/@angular/core/bundles/...
at _View_PhraseDetaildComponent_Host0.AppView.detectViewChildrenChanges (localhost:3000/node_modules/@angular/core/bundles/...
at _View_PhraseDetaildComponent_Host0.detectChangesInternal (PhraseDetaildComponent_Host.ngfactory.js:31:8)
at _View_PhraseDetaildComponent_Host0.AppView.detectChanges (localhost:3000/node_modules/@angular/core/bundles/...
at _View_PhraseDetaildComponent_Host0.DebugAppView.detectChanges (localhost:3000/node_modules/@angular/core/bundles/...
at ViewRef_.detectChanges (localhost:3000/node_modules/@angular/core/bundles/...
at RouterOutlet.activate (localhost:3000/node_modules/@angular/router/bundle...
at ActivateRoutes.placeComponentIntoOutlet (localhost:3000/node_modules/@angular/router/bundle...
consoleError @ zone.js:388
_loop_1 @ zone.js:417
drainMicroTaskQueue @ zone.js:421
ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Error in localhost:3000/app/phrases/phraseDetails/phraseDet... caused by: Cannot read property 'language' of undefined
TypeError: Cannot read property 'language' of undefined
at _View_PhraseDetaildComponent0.detectChangesInternal (PhraseDetaildComponent.ngfactory.js:42)
at _View_PhraseDetaildComponent0.AppView.detectChanges (core.umd.js:9566)
at _View_PhraseDetaildComponent0.DebugAppView.detectChanges (core.umd.js:9671)
at _View_PhraseDetaildComponent_Host0.AppView.detectViewChildrenChanges (core.umd.js:9592)
at _View_PhraseDetaildComponent_Host0.detectChangesInternal (PhraseDetaildComponent_Host.ngfactory.js:31)
at _View_PhraseDetaildComponent_Host0.AppView.detectChanges (core.umd.js:9566)
at _View_PhraseDetaildComponent_Host0.DebugAppView.detectChanges (core.umd.js:9671)
at ViewRef_.detectChanges (core.umd.js:7668)
at RouterOutlet.activate (router.umd.js:3451)
at ActivateRoutes.placeComponentIntoOutlet (router.umd.js:2969)
at _View_PhraseDetaildComponent0.detectChangesInternal (PhraseDetaildComponent.ngfactory.js:42)
at _View_PhraseDetaildComponent0.AppView.detectChanges (core.umd.js:9566)
at _View_PhraseDetaildComponent0.DebugAppView.detectChanges (core.umd.js:9671)
at _View_PhraseDetaildComponent_Host0.AppView.detectViewChildrenChanges (core.umd.js:9592)
at _View_PhraseDetaildComponent_Host0.detectChangesInternal (PhraseDetaildComponent_Host.ngfactory.js:31)
at _View_PhraseDetaildComponent_Host0.AppView.detectChanges (core.umd.js:9566)
at _View_PhraseDetaildComponent_Host0.DebugAppView.detectChanges (core.umd.js:9671)
at ViewRef_.detectChanges (core.umd.js:7668)
at RouterOutlet.activate (router.umd.js:3451)
at ActivateRoutes.placeComponentIntoOutlet (router.umd.js:2969)
at resolvePromise (zone.js:468)
at zone.js:445
at ZoneDelegate.invoke (zone.js:232)
at Object.onInvoke (core.umd.js:6242)
at ZoneDelegate.invoke (zone.js:231)
at Zone.run (zone.js:114)
at zone.js:502
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (core.umd.js:6233)
at ZoneDelegate.invokeTask (zone.js:264)

Вроде бы всё логично и по правилам. Никак не могу понять, что упущено.
Заранее благодарю.

Answer 1

[Александр Манаков]

Так у вас изначально phrase - undefined; Поэтому изначально нет у него св-ва "language"
Если посмотреть на туториал, то у них там этот момент решен через *ngIf="hero" (в вашем случае надо *ngIf="phrase"). Т.е. будет:

<div *ngIf="phrase">
    <h2>The Phrase</h2>
    Language: {{phrase.language}} <br>
    Value: {{phrase.value}}
</div>

P.s. не надо js и map.js пихать в git.

Comments

[Umid]

А как же тогда заиницилизировать?
Он у меня phrase.language не выводит, а value выводит.

[Umid]

Моя лажа. Нашёл почему.

[Umid]

Не могли бы вы ещё 1 момент объяснить?
Как я могу отображать phraseDetails в phraseList'e, т.е. что бы он от списка не уходил. Примерно так:

[Александр Манаков]

Так вы при клике (у вас в функции onSelect) не уходите, а присваивайте какой-нибудь переменной (например selectedPhrase) кликнутую prase.

onSelect(phrase) {
    this.selectedPhrase = phrase;
}

И в темплейте вместо router-outlet

<div *ngIf="selectedPhrase">
   <h2>The Phrase</h2>
   Language: {{selectedPhrase.language}} <br>
   Value: {{selectedPhrase.value}}
</div>

[Umid]

Александр Ман: Тоже как вариант.
Но видел вариант, где делали с помощью router-outlet.