删除模态 Angular Json 数据和引导程序中的错误答案

【问题标题】：Delete Error in Modal Angular Json Data and Bootstrap删除模态 Angular Json 数据和引导程序中的错误
【发布时间】：2020-01-30 21:51:01
【问题描述】：

ERROR TypeError:Cannot read property 'id' of undefined，当我尝试使用 bootstrap 删除模态数据时，我单击按钮并在模态中正确获取数据 json（如在 img 中），知道如何解决这个问题？... 顺便说一句，插入、选择和更新工作正常，但删除不起作用，因为这个错误。

组件.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>

服务（我认为错误在这里？）

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

当我按下modal中的按钮时发生错误

【问题讨论】：

标签： angular typescript bootstrap-4

【解决方案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: ''
       };
    }
  );
}

另外，您的服务应该使用与您的 getOneCategory 相同的 HttpClient 服务实例？

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

【讨论】：