如何使用 Angular NodeJS 和 Mysql 通过单击图标按钮更新状态

How To update Status Using Angular NodeJS and Mysql By Clicking On Icon Button

我想通过单击图标更新客户端的状态(从 0 到 1)(当星号亮起时表示 status=1 )并且我想将 status=0 的状态从 0 更改为 1当我点击星标时,函数无法获取 Id 的问题(参考)来竞争函数 顺便说一句,后端(Nodejs,Mysql)运行良好。

这是我的更新功能服务

 constructor(
        private _httpClient: HttpClient
    )
product: Product;     //this bring the model 
apiURL = 'http://localhost:5000/gestion';
 httpOptions = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }  
    updateflagses(id, product): Observable<Product> {
        return this._httpClient.put<Product>(this.apiURL + '/updatee/' + id, 
        JSON.stringify(this.product), this.httpOptions)
        .pipe(
          retry(1),
          catchError(this.handleError)
        )
      }

包含更新功能的My type脚本代码

  
    
    // Update Client data
  updateeea() {
    if(window.confirm('Êtes-vous sûr de vouloir mettre à jour? Cette action est non réversible')){
      this._ecommerceProductsService.updateflagses(this.id, this.product).subscribe(data => {
        this.router.navigate(['apps/e-commerce/products'])
      })
    }
  } 

这是我点击的星星按钮的 HTML 部分

<ng-container matColumnDef="status">
                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Etat</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-md>
                        <button mat-icon-button   aria-label="Toggle star"   >
                            <mat-icon class="amber-fg" *ngIf="product.status===1" >star</mat-icon>
                            <mat-icon class="secondary-text" *ngIf="product.status===0"  (click)="updateeea(product)" >star_border</mat-icon>
                        </button>
                    </mat-cell>
                </ng-container>

这是Nodejs端的错误

我假设 idproduct 对象中的 属性。

您正在传递 product 但不要在 updateeea 函数中使用它。它应该类似于这样:

updateeea(product: Product) {
  if(window.confirm('Êtes-vous sûr de vouloir mettre à jour? Cette action est non réversible')){
    this._ecommerceProductsService.updateflagses(product.id, product)
      .subscribe(data => {
        this.router.navigate(['apps/e-commerce/products'])
      })
  }
}