預期 2 arguments，但在 Angular8 中得到 1

Question

我使用 static 概念，但為什么會收到此類錯誤 Expected 2 arguments 但得到 1。靜態地，我在 component.html 文件中聲明了我的所有要求，但為什么會收到此類錯誤？

下面我描述了我的代碼我在這一點上得到了錯誤：

<td>
  <button (click)="deleteProduct(prodlist.id)" class="btn btn-warning">DeleteProduct</button>

產品.組件.html

<h1><b>Product Lists</b></h1>
    <div class="alert alert-success" *ngIf='message'>{{message}}</div>
    <div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>Product</th>
                <th>Price</th>
                <th>OrderDate</th>
                <th>DelicerDate</th>
                <th>Is Xomplete</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- this *ngFor is forEach loop in java
            where you declare for( int prod : products){} -->
            <tr *ngFor="let prodlist of proudLists">
            <td>{{prodlist.product}}</td>
            <td>{{prodlist.price}}</td>
            <td>{{prodlist.orderdate | date}}</td>
            <td>{{prodlist.deliverdate | date}}</td>
            <td>{{prodlist.done}}</td>
            <td><button (click)="deleteProduct(prodlist.id)" class="btn btn-warning">DeleteProduct</button></td>
            </tr>
        </tbody>
    </table>
    </div>

產品.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductdataService } from '../service/data/productdata.service';

export class Product{
  constructor(
    public id: number,
    public product : String,
    public price : number,
    public orderdate : Date,
    public deliverdate : Date,
    public done : boolean
  ){

  }
}

@Component({
  selector: 'app-productlist',
  templateUrl: './productlist.component.html',
  styleUrls: ['./productlist.component.css']
})
export class ProductlistComponent implements OnInit {
  proudLists : Product[];
  message : String;
  
  constructor(private prodataservice : ProductdataService) { }

  ngOnInit() {
      this.prodataservice.retriveAllProducts('Printer')
      .subscribe(
        response =>{
          console.log(response);
          this.proudLists=response;
        }
      )
  }
  deleteProduct(productname,id){
    console.log(`gao hand ${id}`);
    this.prodataservice.deleteProduct('Printer',id).subscribe(
      response =>{
        console.log(response);
       this.message='Dele of ${id} successFull';
      }
    )
  }

}

產品數據.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Product } from 'src/app/productlist/productlist.component';

@Injectable({
  providedIn: 'root'
})
export class ProductdataService {

  constructor(private htp:HttpClient ) { }
  retriveAllProducts(productname){
   return this.htp.get<Product[]>(`http://localhost:8080/users/${productname}/prodct`)
  }
  deleteProduct(productname,id){
    return this.htp.delete(`http://localhost:8080/users/${name}/prodct/${id}`)
  }
}

Answer 1

你得到這個錯誤是因為這個按鈕：

<button (click)="deleteProduct(prodlist.id)" class="btn btn-warning">DeleteProduct</button>

應該是這樣的：

<button (click)="deleteProduct('product name',prodlist.id)" class="btn btn-warning">DeleteProduct</button>

我查看了 controller 中的 deleteProduct(productname, id) 並且您沒有在任何地方使用 productname 變量，因此只需將 controller 中的 function 更改為 deleteProduct(id)