Question

我正在尝试编写一个端点，用于从数据库中删除项目。用户将要选择的项目将被删除。表格通过复选框。

对于前端，我使用角度，对于后端猫鼬和表达。

在倾斜的一侧，我有一个表格来列出项目，并在单击删除按钮时显示确认对话框。当用户检查项目时，点击删除图标（按钮），我可以通过“ ngFor”获得产品信息但是在确认对话框中单击“是”后，我无法实现将项目数据发送到数据库的操作。

我试图分配方法，并在条件下通过布尔变量调用它们。但是发生了“响应为空”错误。

component.html

<table
  id="mytable"
  class="table table-bordred table-dark table-hover table-striped"
>
  <thead>
    <th><input type="checkbox" /></th>
    <th>Category</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Price</th>

    <th>Edit</th>

    <th>Delete</th>
  </thead>
  <tbody *ngFor="let product of products;let i=index;">
    <tr>
      <td>
        <input
          type="checkbox"
          class="checkall"
          id="checked"
          (change)="selectCheckbox($event,product._id)"
        />
      </td>

      <td>{{product.category}}</td>
      <td>{{product.name}}</td>
      <td>{{product.description}}</td>
      <td>{{product.price}}</td>

      <td>
        <p data-placement="top" data-toggle="tooltip" title="Edit">
          <button
            class="btn btn-primary btn-xs"
            data-title="Edit"
            data-toggle="modal"
            data-target="#edit"
          >
            <i class="fas fa-edit fa-xs"></i>
          </button>
        </p>
      </td>
      <td>
        <p data-placement="top" data-toggle="tooltip" title="Delete">
          <button
            (click)="deleteAProduct(product)"
            class="btn btn-danger btn-xs"
            data-title="Delete"
            data-toggle="modal"
            data-target="#delete"
          >
            <i class="far fa-trash-alt fa-xs"></i>
          </button>
        </p>
      </td>
    </tr>
  </tbody>
</table>

<div
  class="modal fade"
  id="delete"
  tabindex="-1"
  role="dialog"
  aria-labelledby="edit"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-hidden="true"
        >
          <i style="position: absolute;left: 0.25rem;" class="fas fa-times"></i>
        </button>
        <h4 class="modal-title custom_align" id="Heading">Bu Ürünü Sil</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-danger">
          <span class="glyphicon glyphicon-warning-sign"></span> Are you sure to
          delete this product?
        </div>
      </div>
      <div class="modal-footer ">
        <button (click)="intentToDelete()" class="btn btn-success">
          <span class="glyphicon glyphicon-ok-sign"></span>Yes
        </button>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove"></span>Cancel
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

菜单模型

const mongoose = require("mongoose");

const menuSchema = mongoose.Schema({
  company: { type: mongoose.Schema.Types.ObjectId, ref: "Company" },
  products: [
    {
      name: String,
      price: {
        type: Number,
        currency: ["TRY", "EUR", "USD"]
      },
      description: String,
      state: Boolean,
      imgUrl: String,
      category: String
    }
  ]
});

component.ts

confirm = false;
constructor(private fb: FormBuilder, private menuService: MenuService) {}
intentToDelete() {
  this.confirm = true;
}

deleteAProduct(product) {
  if (this.confirm === true) {
    try {
      this.menuService.deleteProduct(product).subscribe(data => {
        console.log(data);
      });
    } catch (error) {
      console.log(error);
    }
  }
}

component.service.ts

deleteProduct(body): Observable<any> {
    return this.http.delete(BASEURL + '/menu/delete-product', body);
 }

端点

async deleteProduct(req, res) {
  const productId = req.body._id;
  await Menu.deleteOne({
    _id: productId
  })
    .then(info => {
      res.status(httpStatus.Ok).json({ message: "product deleted" }, info);
    })
    .catch(err => {
      res
        .status(httpStatus.INTERNAL_SERVER_ERROR)
        .json({ message: "error occured!", err });
    });
}

Answer 1

我们通常在网址中而不是正文中发送已删除邮件的ID。

所以我将像这样更改我的角度服务：

deleteProduct(body): Observable<any> {
    return this.http.delete(BASEURL + '/menu/delete-product/'+ body._id);
  }

在快速方面，我们可以使用req.params._id读取此ID，但是删除路由签名必须具有这样的router.delete("/:_id", controller.deleteProduct)。

要从菜单中删除产品，可以使用以下功能：

deleteProduct(req, res) {
  const productId = req.params._id;

  const companyId = "5df28fe8a8e0c23240a147a8"; //TODO: set the logined company id

  Menu.findOneAndUpdate(
    { company: companyId },
    {
      $pull: { products: { _id: productId } }
    },
    {
      new: true
    }
  )
    .then(doc => {
      console.log("Doc: ", doc);
      res.status(200).json({ message: "product deleted", doc });
    })
    .catch(err => {
      console.log("Error: ", err);
      res.status(500).json({ message: "error occured!" });
    });
}

测试：

假设您有一个包含2种产品的菜单：

{
    "_id": "5df36c7353876b368864bd3a",
    "company": "5df28fe8a8e0c23240a147a8",
    "products": [
        {
            "_id": "5df36c7353876b368864bd3c",
            "name": "Product1",
            "price": 11,
            "currency": "TRY"
        },
        {
            "_id": "5df36c7353876b368864bd3b",
            "name": "Product2",
            "price": 22,
            "currency": "TRY"
        }
    ],
    "__v": 0
}

如果您要删除ID为5df36c7353876b368864bd3c的Product1，将此ID发送到您的删除路线，响应如下：

{
    "_id": "5df36c7353876b368864bd3a",
    "company": "5df28fe8a8e0c23240a147a8",
    "products": [
        {
            "_id": "5df36c7353876b368864bd3b",
            "name": "Product2",
            "price": 22,
            "currency": "TRY"
        }
    ],
    "__v": 0
}

请注意，我还修复了您在注释中提到的菜单架构。它必须具有单独的价格和货币字段，如下所示：

const menuSchema = mongoose.Schema({
  company: { type: mongoose.Schema.Types.ObjectId, ref: "Company" },
  products: [
    {
      name: String,
      price: Number,
      currency: {
        type: String,
        enum: ["TRY", "EUR", "USD"]
      },
      description: String,
      state: Boolean,
      imgUrl: String,
      category: String
    }
  ]
});

或者您可以将其保留在带有价格和货币字段的对象字段中。

从角度发送快递请求到快递

1 个答案: