无法使用Angular Material将新行添加/删除到表中

Question

我无法在Angular Material表中添加新行或从Angular Material表中删除该行。

add.component.html：

<button mat-button (click)="openDialog('Add',{})" mat-flat-button color="primary">Add Row</button>
<div class="clear"></div>
 <mat-table #table [dataSource]="dataSource" class="my-table mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="Name">
   <th mat-header-cell *matHeaderCellDef> Name </th>
   <td mat-cell *matCellDef="let element">
   <mat-select
          placeholder="Select Option" 
          aria-label="Select Option" 

          (selectionChange)="onOptionTypeSelectionChanged($event)"
          formControlName="option"
          class="example-margin"
   >
   <mat-option *ngFor="let s of option" [value]="s">
   <span *ngIf="!s">
   </span>
  <span *ngIf="s">
     {{s}}
  </span>
</mat-option>
</mat-select>
 </td>
</ng-container>

<!-- Value column -->

 <ng-container matColumnDef="value">
 <th mat-header-cell *matHeaderCellDef> Values </th>
 <td mat-cell *matCellDef="let element">
  <mat-select
        placeholder="Select Value" 
        aria-label="Select Value" 

        (selectionChange)="onOptionValueSelectionChanged($event)"
        formControlName="value"
        class="example-margin"
        multiple
>
<mat-option *ngFor="let s of option" [value]="s">
       <span *ngIf="!s">
                                                </span>
                                                <span *ngIf="s">
                                                    {{s}}
                                                </span>
                                            </mat-option>
                                        </mat-select>
                                    </td>
                                </ng-container>

                                <!-- Action section -->
                                <ng-container matColumnDef="action">
                                    <th mat-header-cell *matHeaderCellDef> Action </th>
                                    <td mat-cell *matCellDef="let element" class="action-link">| 
                                        <a (click)="openDialog('Delete',element)">Delete</a>  
                                    </td>
                                </ng-container>
                                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                            </mat-table>



                        </div>
                    </div>

add.component.ts：

size: any = [
    "28",
    "30",
    "32",
    "34",
    "36",
    "38",
    "40",
    "42",
    "44"
  ]

  color: any =[
    "Black",
    "Grey",
    "White",
    "Blue",
    "Red",
    "Pink",
    "Navy blue"
  ]

  displayedColumns: string[] = ['Name', 'value', 'action'];

  dataSource: any[] = [
    {Name: '', value: ''}
  ]
option: any =[
    "Size",
    "Color"
  ]
openDialog(action,obj) {
    obj.action = action;

    if(obj.action == 'Add'){
      this.dataSource.push({Name: '', value: ''});
      console.log('data',this.dataSource);
    }else if(obj.action == 'Delete'){

    }
  }

在表中，我在一行中有两个选择选项和一个添加按钮。我需要用户单击添加按钮时，在操作部分将使用删除按钮创建相同类型的新行，如果单击删除按钮，则将删除该行。同样，第一行将没有删除按钮。在我的情况下，单击添加按钮时不会添加任何内容。