从api占位符json Angular中删除数据答案

【问题标题】：Delete data from api placeholder json Anguler从api占位符json Angular中删除数据
【发布时间】：2022-01-20 07:40:24
【问题描述】：

我正在尝试使用 anguler 删除单击的 td，但它不起作用，dosent 返回任何东西，只是它获取数据任何人都可以帮助并告诉我我的错误在哪里，我是使用钓鱼者的新手。谢谢这是component.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  dataArray;
  id;
  constructor( private http:HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
      data =>{
        this.dataArray = data
      }
    )
  }

  ngOnInit(): void {
    this.delete
  }
  delete () {
    this.http.delete('https://jsonplaceholder.typicode.com/posts/${id}')
            .subscribe(() => this.id = 'Delete successful');
            console.log(this.dataArray)
  }

}

这是我的桌子：

 <div class="table-list">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Title</th>
                  <th scope="col">Operations</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of dataArray;" index as i>
                  <td>{{item.title}}</td>
                  <td> <i class="fal fa-check-circle px-2"></i> <i class="fal fa-edit px-2"></i> <button><i class="fal fa-trash-alt" (click)="delete()"></i></button> </td>
                </tr>
              </tbody>
            </table>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您必须将参数传递给您的删除函数：

delete (id: number) {
this.http.delete('https://jsonplaceholder.typicode.com/posts/' + id)
        .subscribe(() => this.id = 'Delete successful');
        console.log(this.dataArray)

}

在您的 html 上添加 (click)="delete(item.id)

然后要从你必须运行的数组中删除数据：

this.array = this.array.filter((d) => d.id !== id));

【讨论】：