Question

当我按下调用删除功能的删除按钮时，我得到了500（内部服务器错误），我想从服务器中删除数据，它如何通过索引并删除待办事项

> import { Component, OnInit, Input } from '@angular/core';
>     import { Router } from '@angular/router';
>     import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
>     import { Validators } from '@angular/forms';
>     import { HttpService } from '../http.service';
> 
> 
> 
>     @Component({
>       selector: 'todo-app',
>       templateUrl: './todo-app.component.html',
>       styleUrls: ['./todo-app.component.css']
>     })
>     export class TodoAppComponent implements OnInit {
> 
>     myForm: FormGroup;
>     todoitems = [];
>     todolist;
>     submitted = false;
>     name;
> 
>       constructor(private router: Router, private formBuilder: FormBuilder, private httpService: HttpService ) {
>       }
> 
>       ngOnInit() {
>         this.myForm = this.formBuilder.group({
>            todoitems : [this.todolist, Validators.compose([Validators.required, Validators.minLength(3)])]
> 
>         });
>         
>         this.httpService.gettodo().subscribe(
>           (data:any[]) => {
>             this.todoitems = data;
>             console.log(this.name);
>             }
>         );
>       
>     }
>       
> 
> 
>       
>       
> 
>       addTodo(todolist) {
>         
>         if (this.myForm.invalid) {
>           this.submitted = true;
> 
>          
>        }
>         if (this.myForm.valid) {
>           var body = { name: this.todolist }
>          this.httpService.addTodoo(body).subscribe(
>           (data:any) => {
>             this.todoitems = data;
>             console.log(data);
>           }
>         )
> 
>           this.myForm.reset();
>           this.submitted = false;
>           console.log('Form Submitted!');
>           console.log(this.todoitems);
>             
>       }     
> 
>       }
> 
>       deletetodo(id : number) {
>         this.httpService.deleteTodo(id).subscribe()
> 
>     }
> 
> 
> 
>     }
> 
> 
> //http.service delete fun
>  deleteTodo(id){
>     return this.http.delete('http://localhost:3000/api/names/=${id}')   }
> 
> 
>

> 
>     <form [formGroup]="myForm">
> 
>         <div>
> 
>             <input formControlName="todoitems"  [(ngModel)]="todolist" name="todoitems">
>             <button  type="submit" (click)="addTodo(todolist)">Add</button>
>                 <div>
>                 <div *ngIf="submitted && myForm.controls.todoitems.errors">
>                     <div *ngIf="myForm.controls.todoitems.errors.required"> please fill</div>
>                     <div *ngIf="myForm.controls.todoitems.errors.minlength">min 3</div>
>                 </div>
> 
>             </div>
>         </div>
>     <br>
>                <div>
>             <table style="width:50%">
>             <tr *ngFor="let todoitem of todoitems; let i = index" >
>              
>                 <td>{{ todoitem.name }}</td>
> 
>              <td>
>                     <button (click)="deletetodo(id)">Delete</button>
>              </td>
> 
>             </tr>
> 
>          </table>
>         </div>
> 
>     </form>
> 
>

Answer 1

500 Internal Server Error意味着您的服务器是有问题的服务器，而不是您的角度应用程序。

可能是您使用服务器不支持的Http方法调用端点，向您传递了错误的信息，或者仅仅是服务器上的方法有问题。

Answer 2

尝试更新您的删除http：

deleteTodo(id) {
    return this.http.delete(`http://localhost:3000/api/names/${id}`)  
}

似乎您使用了引号，而不是评估${id}所需的反引号

那么您的uri是api/names/=${id}。您的背部确实需要=符号还是仅仅是错字？

然后在您的模板更新中：

 <button (click)="deletetodo(todoitem.id)">Delete</button>

500（内部服务器错误）角度删除api

2 个答案: