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

Question

我已经将采购发票项目列表加载到了mat-table数据源中。然后，想象以下项目列表字段， 没有ItemName ItemCode数量ItemPrice税TaxAmount总价格 1项目1 IT001 [输入字段] 100 9％10110

然后，我的问题是“数量”（Quantity）列字段输入一些否，然后提交表格，将dataSource传递给服务并将数据保存在数据库中。如何将用户输入的数量传递给dataSource ..

                      <!-- 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>```