如何更新TD文本框附近的值？

Question

我正在开发购物车应用程序。在那里，我需要根据用户以前存储为本地 JSON 的订单来更新我的产品屏幕。我正在从服务器返回的 JSON 构建我的产品屏幕。

现在我想自动更新从服务器返回的每个产品的数量，并与之前订单的本地 JSON 进行比较。

例如产品屏幕有项目“SNICKERS”，之前的订单也有相同数量的项目，我需要在表格中“SNICKERS”行 TD 的文本框中填写这些数量值。请参考我附上的图片。

同样，如果之前的订单商品和下订单屏幕商品匹配，我需要更新所有数量值。我正在匹配产品代码，我已经完成了，但我不知道如何更新文本框中的数量值。

本地 JSON：

Object {order_id: "9ec3bd80-91fc-0138-c8e0-0cc47ac946e0", product_code: "1000", quantity: 1, …}

来自服务器的 JSON

Object {macs_menu_id: "1047-2000000365", header_text: null, total_price: "1.68", …}
4:Object {macs_menu_id: "1047-2000000365", header_text: null, total_price: "1.04", …}
header_text:null
header_text:null
indigent_kit:0
macs_menu_id:"1047-2000000365"
menu_prod_cat:"CNDY"
product_code:"1000"
product_desc:"SNICKERS - K"
quan_limit:0
sort_order:910
total_price:"1.68"}

我比较两个 json 产品代码的代码如下

for (const x in prev_orders) {
              for (const y in response.payload.filter(d => d.product_code != null && d.macs_menu_id === this.InmateMacMenu).sort((a, b) => a.sort_order - b.sort_order)) {
                if (prev_orders[x].product_code === response.payload[y].product_code) {
                  if ($('.mat-elevation-z8 td:contains("' + prev_orders[x].product_code + '")')) {
                    // if product code matched
                    console.log('product code matched ' + response.payload[y].product_code);                
                    $('.mat-elevation-z8 td:contains("' + prev_orders[x].product_code + '")').closest('td').find('input').val(prev_orders[x].quantity);
                  }
                } else {
                  console.log('not matched');
                }
              }
            }

我在控制台中收到产品代码匹配消息。现在我需要更新文本框中的数量。谁能帮我做到这一点？谢谢

下订单屏幕

控制台消息

还有我的 HTML 代码

    <table id="products" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
              <ng-container matColumnDef="menu_prod_cat">
                  <th mat-header-cell *matHeaderCellDef style="width: 35px;"> Category </th>
                  <td mat-cell *matCellDef="let data; let i = index" [attr.rowspan]="getRowSpan('menu_prod_cat', i)" [style.display]="getRowSpan('menu_prod_cat', i) ? '' : 'none'"> {{data.menu_prod_cat }}</td>
              </ng-container>
              <ng-container matColumnDef="product_code">
                  <th mat-header-cell *matHeaderCellDef> Code </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="{'highlight': selectedRowIndex == data.product_code}"> {{data.product_code}} </td>
              </ng-container>
              <ng-container matColumnDef="product_desc">
                  <th mat-header-cell *matHeaderCellDef> Description </th>
                  <td mat-cell *matCellDef="let data" [ngClass]="{'highlight': selectedRowIndex == data.product_code}" (click)="get_image_binary(data)"> {{data.product_desc }} </td>
              </ng-container>
              <ng-container matColumnDef="total_price">
                  <th mat-header-cell *matHeaderCellDef>Price </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="{'highlight': selectedRowIndex == data.product_code}">
                      {{data.total_price | currency}} </td>
              </ng-container>
              <ng-container matColumnDef="quan_limit">
                  <th mat-header-cell *matHeaderCellDef style="width: 20px;">Quantity Limit </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="{'highlight': selectedRowIndex == data.product_code}">
                      {{data.quan_limit }} </td>
              </ng-container>
              <ng-container matColumnDef="Quantity">
                  <th mat-header-cell *matHeaderCellDef style="width: 35px;"> Quantity </th>
                  <td mat-cell *matCellDef="let data; let i = index" (click)="get_image_binary(data)" [ngClass]="{'highlight': selectedRowIndex == data.product_code}">
                    <!-- <ng-numeric-input [layout]="'tel'" [class]="'form-control'"  maxlength={{data.quan_limit}}  [id]="'txtqty{i}'" [placeholder]="'0'"  [(ngModel)]="data.quantity" (keyup)="quantityModelChange($event,data)" [entertext]="'Next'"></ng-numeric-input> -->
                     <input type="number" id=txtqty{{i}} pattern="[0-9]*" inputmode="numeric" min="1" max={{data.quan_limit}} [(ngModel)]="data.quantity" (keyup)="quantityModelChange($event,data)" class="Col-tdinput">
                      <!-- <input type="number" min="1" max={{data.quan_limit}} (ngModel)="data.quantity" class="Col-tdinput" (keyup)="quantityKeypress($event,data)" pattern="[0-9]*">
                      (ngModelChange)="quantityModelChange($event,data)"
                      -->
                  </td>
              </ng-container>
              <ng-container matColumnDef="Total">
                  <th mat-header-cell *matHeaderCellDef> Total </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="{'highlight': selectedRowIndex == data.product_code}">
                      <p *ngIf="data.quantity > 0">{{data.total_price * data.quantity | currency}}</p>
                  </td>
              </ng-container>
              <ng-container matColumnDef="Action">
                  <th mat-header-cell *matHeaderCellDef></th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)">
                      <button class="Col-Cartbtn" (click)="IncermentProduct(data)">+</button>
                      <button class="Col-Cartbtn" [disabled]="data.quantity==0" (click)="DecrementProduct(data)">-</button>
                  </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>

Answer 1

嗨，我自己找到了答案。它很简单，我只是将本地 json 数量值分配给服务器 json 数量。

因为我使用 data.quantity 属性绑定了我的文本框，所以当我比较产品代码时，我会分配值。检查我的附加代码。谢谢你们的cmets

for (const x in prev_orders) {
          // tslint:disable-next-line:max-line-length
          for (const y in response.payload.filter(d => d.product_code != null && d.macs_menu_id === this.InmateMacMenu).sort((a, b) => a.sort_order - b.sort_order)) {
            if (prev_orders[x].product_code === response.payload[y].product_code) {
              // tslint:disable-next-line:only-arrow-functions
              $('tr').each(function() {
                if ($('td:contains("' + prev_orders[x].product_code + '")')) {
                  // if product code matched
                  response.payload[y].quantity = prev_orders[x].quantity;
                  self.addProductToCart(response.payload[y], response.payload[y].quantity);
                }
              });
            } else {
              console.log('not matched');
            }
          }
        }