Ошибка удаления в модальных угловых данных Json и начальной загрузке

Question

ОШИБКА TypeError: Cannot read property 'id' of undefined, когда я пытаюсь удалить данные в модальном режиме с помощью начальной загрузки, я нажимаю кнопку и правильно получаю данные json в модальном режиме (как в img), какая-то идея, как это исправить? ... Кстати,вставка, выбор и обновление работают правильно, но удаление не работает, потому что эта ошибка.

component.ts

selectedExamen;
examenes: Examen[];
@ViewChild('btnClose') btnClose: ElementRef;
constructor(private dataService: dataService, public dialog: MatDialog) {
  this.getExamenes();
  this.selectedExamen = {
    id: -1, nombreExa: '', descripcionExa: '',
    release_date: '', fechaExa: '', categoriaExa: '', nombrePac: '',
    apellidoPac: '', rutPac: '', apellidoDoc: '', nombreDoc: ''
  };
}
delete (exa): void {
  this.dataService.deleteExamenes(exa.id);
  this.examenes = this.examenes.filter(e => e !== exa);
}
examenClicked = (exa) => {

  this.dataService.getOneExamen(exa.id).subscribe(
    (data: Examen) => {
      this.selectedExamen = data;
      console.log('JSON DATA --->', data);
    },
    error => {
      alert('Error al Conectar Datos ');
    }
  );
}

component.html

<button class="btn btn-danger" href="#deleteCategory" (click)="examenClicked(categorias)" data-toggle="modal" >Borrar</button>
<button class="btn btn-secondary" type="button" href="#signinModal" data-toggle="modal"  (click)="examenClicked(categorias)">Editar</button>  

"modal button"
 <button type="button" class="btn btn-danger" (click)="delete()">Borrar</button>

service (Iдумаю, что ошибка здесь?)

deleteCategorias(id: number): Promise <void> {
  const url = `${"http://127.0.0.1:8000/categoria"}/${id}`;
  return this.http.delete(url, { headers: this.headers })
    .toPromise()
    .then(() => null)
}
getOneCategory(id): Observable <Categoria> {
  return this.httpClient.get<Categoria>(this.baseurl + '/categoria/' + id ,
  ).pipe()
}

ошибка возникает, когда я нажимаю кнопку в модальном

Answer 1

Ваше событие модальной кнопки onClick обрабатывается обработчиком события delete(exa). Который ожидает аргумент "exa". Однако вы вызвали его только с delete():

<button type="button" class="btn btn-danger" (click)="delete()">Borrar</button>

. Вы можете изменить delete() вашего компонента, чтобы не принимать параметр exa, чтобы исправить эту ошибку:

selectedExamen;
examenes: Examen[];
@ViewChild('btnClose') btnClose: ElementRef;
constructor(private dataService: dataService, public dialog: MatDialog) { }

ngOnInit(){ //initialization code should be put inside ngOnInit() as much as possible
   this.getExamenes(); //What does this do???
}

delete (): void { //removed exa
  if(this.selectedExamen != undefined){ //use selectedExamen which you retrieve on launching modal.
     this.dataService.deleteExamenes(this.selectedExamen.id).subscribe(
         (deleteSuccess) => {
             alert('delete success');
         },
         (error) => {
             alert('error deleting');
         }
     )
     this.examenes = this.examenes.filter(e => e !== this.selectedExamen);
  }else{
     alert('no examen');
  }
}


examenClicked(exa){ //examenClicked = () => {} is same as examenClicked(){}
  this.dataService.getOneExamen(exa.id).subscribe(
    (data: Examen) => {
      this.selectedExamen = data;
      console.log('JSON DATA --->', data);
    },
    error => {
      alert('Error al Conectar Datos ');
      this.selectedExamen = { // changed this from constructor to here.
         id: -1, nombreExa: '', descripcionExa: '',
         release_date: '', fechaExa: '', categoriaExa: '', nombrePac: '',
         apellidoPac: '', rutPac: '', apellidoDoc: '', nombreDoc: ''
       };
    }
  );
}

также ваша служба должна использовать тот же экземпляр службы HttpClient, что и ваша getOneCategory?

deleteCategorias(id: number): Promise <void> {
  const url = `${"http://127.0.0.1:8000/categoria"}/${id}`;
  return this.httpClient.delete(url, { headers: this.headers });
  //Preferably to use Observables than promises when making HTTP calls.
  //You use .subscribe() in `delete()` to make HTTP request.
}


getOneCategory(id): Observable <Categoria> {
  return this.httpClient.get<Categoria>(this.baseurl + '/categoria/' + id);
}