Получить детали объекта в угловых 6

Question

Что я пытаюсь сделать, если я нажму на модуль курса, он покажет его детали. У меня уже есть этот код, и он выдает ошибку: Невозможно прочитать свойство 'id' из неопределенного .

coursemoduleapi.service.ts

getCourseModule(id:number) {
return this.httpClient.get(`${this.baseUrl}${id}/`, {headers: this.headers}); 
}

coursemodule.component.ts

export class CoursemoduleComponent implements OnInit {

@Input() coursemodule;

coursemodules: any = []
selectedCourseModule = null;

constructor(
private coursemoduleService: CoursemoduleapiService
) { }

ngOnInit() {

this.coursemoduleService.getCourseModules().subscribe(
  data => {
    this.coursemodules = data;
  },
  error => console.log(error)
 );

}

getDetails() {
this.coursemoduleService.getCourseModule(this.coursemodule.id).subscribe(
  coursemodule => {
    console.log(coursemodule);
  },
  error => console.log(error)
 );
 }

}

coursemodule.component.html

<app-coursemodule-list [coursemodules]="coursemodules"
(getDetails)="getDetails($event)"> </app-coursemodule-list>

coursemodule-list.component.ts

export class CoursemoduleListComponent implements OnInit {

@Input() coursemodules = [];
@Output() getDetails = new EventEmitter();

constructor() { }

ngOnInit() {}

courseModuleClicked(coursemodule) {
this.getDetails.emit(coursemodule)
}

coursemodule-list.component.html

<div class="list-group list-group-flush" role="tablist"  
*ngFor="let coursmodule of coursemodules">
    <a class="list-group-item list-group-item-action" data- 
    toggle="list" href="#account" role="tab" 
    (click)=courseModuleClicked(coursmodule_id)>
        {{coursmodule.coursemodule_title}}
    </a>
</div>

Answer 1

Вот как я заставил его работать, я добавил параметр для функции getDetails и смог получить его в своем журнале консоли.

coursemodule.component.ts

getDetails(coursemodule) {
this.coursemoduleService.getCourseModule(coursemodule).subscribe(
coursemodule => {
console.log(coursemodule);
  },
error => console.log(error)
);
}

В моем coursemodule-list.component.html я изменил параметр для функции click на coursemodule.id, который теперь выглядит следующим образом:

(click)=courseModuleClicked(coursmodule.id)

Answer 2

Конечно, вход coursemodules не получает никакого значения от родительского компонента. Кажется, в названии параметра в методе click есть опечатка.

В вашем коде это courseModuleClicked(coursmodule_id), изменив его на courseModuleClicked(coursmodule.id), оно должно работать