angular - 如何将用户输入字段行添加到 Mat Table 数据源

Question

我已经在 mat-table 数据源中加载了采购发票项目列表。并且，想象以下项目列表字段，如 No ItemName ItemCode Quantity ItemPrice Tax TaxAmount TotalPrice 1 Item1 IT001 [input field] 100 9% 10 110

而且，我的问题是“数量”列字段输入一些否并提交表单，数据源传递给服务并将数据保存在数据库中。如何将用户输入数量传递给数据源..？

                      <!-- Position Column -->
                      <ng-container matColumnDef="No">
                          <th mat-header-cell *matHeaderCellDef> No. </th>
                          <td mat-cell *matCellDef="let element;let i = index"> {{ i+1 }} </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <!-- Name Column -->
                      <ng-container matColumnDef="MaterialName">
                          <th mat-header-cell *matHeaderCellDef > MaterialName </th>
                          <td mat-cell *matCellDef="let element">
                              {{element.MaterialName}}
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="MaterialCode">
                          <th mat-header-cell *matHeaderCellDef > MaterialCode </th>
                          <td mat-cell *matCellDef="let element">
                              {{element.MaterialCode}}
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>
                      <ng-container matColumnDef="Quantity">
                          <th mat-header-cell *matHeaderCellDef > Quantity </th>
                          <td mat-cell *matCellDef="let element"> 
                              <mat-form-field class="" appearance="outline" >
                                  <input matInput placeholder=""  [value]="element.Quantity" >
                              </mat-form-field>  
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="ValuationPrice">
                          <th mat-header-cell *matHeaderCellDef > ValuationPrice </th>
                          <td mat-cell *matCellDef="let element"> {{element.ValuationPrice | currency}} </td>
                          <td mat-footer-cell *matFooterCellDef> Total : {{getTotalCost() | currency}}   </td> 
                          <!--<td mat-footer-cell *matFooterCellDef> Total : {{ab | currency}}   </td>>-->

                      </ng-container>

                      <ng-container matColumnDef="Tax">
                        <th mat-header-cell *matHeaderCellDef > Tax </th>
                        <td mat-cell *matCellDef="let element"> {{element.Tax}} </td>
                        <td mat-footer-cell *matFooterCellDef>     </td>

                      </ng-container>

                      <ng-container matColumnDef="TaxAmount">
                        <th mat-header-cell *matHeaderCellDef > TaxAmount </th>
                        <td mat-cell *matCellDef="let element"> {{element.TaxAmount}} </td>
                        <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="TotalAmount">
                        <th mat-header-cell *matHeaderCellDef > TotalAmount </th>
                        <td mat-cell *matCellDef="let element"> {{element.TotalAmount}} </td>
                        <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="delete">
                          <th mat-header-cell *matHeaderCellDef> Delete </th>
                          <td mat-cell *matCellDef="let element">
                              <button mat-icon-button color="warn" (click)="deleteItem(element)">
                                <mat-icon class="mat-18">delete</mat-icon>
                            </button>
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                      <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

                  </table>```

标签： angulartypescriptangular-material