Angular 在动态mat表中添加静态行

我使用mat表，并希望插入两条静态线。在这些静态行中进行输入，然后存储在后端。您能告诉我如何插入静态行并使其可供处理吗

我的代码：

// HTML
<table mat-table [dataSource]="dataSource">
  <div *ngFor="let column of displayedColumns; let i = index">
    <ng-container [matColumnDef]="column.attribute">
      <!-- Table-Header -->
      <th mat-header-cell class="table-header-bg-second" id="table-header-font-second" *matHeaderCellDef>
        <div>
          {{ column.name }}
        </div>
      </th>
      <td mat-cell class="table-content-bg-second" id="table-content-font-second" *matCellDef="let row; let i = index;" [ngClass]="{ 'disabled-ranges': column.disabledRanges, 'disabled-assignment': column.disabledAssignment}">
        <div formArrayName="rows" *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns">
          <span class="edit-cell" [formGroupName]="i">
            <mat-form-field>
              <label>
                <input matInput type="text" [formControlName]="column.attribute" />
              </label>
            </mat-form-field>
          </span>
        </div>
        <ng-template #otherColumns>
          {{ column.object !== null ? row[column.object][column.attribute] : row[column.attribute] }}
        </ng-template>
      </td>
    </ng-container>
  </div>

  <!-- Display columns -->
  <tr mat-header-row class="optimize-header-row" *matHeaderRowDef="columns; sticky: true"></tr>
  <tr mat-row class="optimize-row" *matRowDef="let row; columns: columns;"></tr>
</table>

---

你能为

mat表添加完整的html吗？

？html我已经扩展了。我想你可以使用表的页脚将你的输入放在里面：

// TS
private monthColumns: EditColumns[] = [
    {attribute: '1', name: 'Jan', object: 'values', disabledRanges: false, disabledAssignment: false},
    {attribute: '2', name: 'Feb', object: 'values', disabledRanges: false, disabledAssignment: false},
    {attribute: '3', name: 'Mrz', object: 'values', disabledRanges: false, disabledAssignment: false},
    {attribute: '4', name: 'Apr', object: 'values', disabledRanges: false, disabledAssignment: false},
  ];

  private afterMonthsColumns: EditColumns[] = [
    {attribute: 'sum', name: 'Summe', object: 'values', disabledRanges: true, disabledAssignment: false},
    {attribute: 'note', name: 'Anmerkung', object: null, disabledRanges: false, disabledAssignment: false},
  ];

  // Merged arrays
  public displayedColumns: EditColumns[] = [
    ...this.monthColumns,
    ...this.afterMonthsColumns
  ];