角度：展开的表格在更新后会折叠

Question

我有一个包含行的简单表，每行都在我的应用程序中生成一个扩展表。用户可以通过操作按钮来更新扩展表（在我的应用中，此操作会删除扩展表中的一行）。

我的问题是，一旦用户删除一行，扩展表就会崩溃，这并不能带来很好的用户体验。

这里讨论了这个问题：https://github.com/swimlane/ngx-datatable/issues/1313 这里有一个Stackblitz示例，它完美地描述了我的问题：https://stackblitz.com/edit/angular-yvwhus?file=app%2Fapp.component.ts（单击按钮时会崩溃）。

该解决方案似乎非常复杂，我不确定是否可以在我的应用程序/代码中实现它-如今Angular有没有更简单的东西？

这是我的桌子的代码：

<table #sortCol1 [dataSource]="URLDataSource" mat-table matSort multiTemplateDataRows>

  <!-- URL Columns -->
  <ng-container *ngFor="let column of url_columns">
    <ng-container *ngIf="column.isModelProperty" [matColumnDef]="column.property">
      <th *matHeaderCellDef mat-header-cell mat-sort-header> {{ column.name }}</th>
      <td *matCellDef="let url" mat-cell> 
        {{ url[column.property] }} 
      </td>
    </ng-container>
  </ng-container>

  <!-- Expanded data -->
  <ng-container matColumnDef="expandedDetail">
    <td *matCellDef="let url" mat-cell [attr.colspan]="url_columns.length"> 
      <div class="example-element-detail" [@detailExpand]="url == expandedElement ? 'expanded' : 'collapsed'">
        <table #sortCol2 [dataSource]="url.urldata" mat-table matSort> 
          <ng-container *ngFor="let urldata_column of urldata_columns"> 
            <ng-container *ngIf="urldata_column.isModelProperty" [matColumnDef]="urldata_column.property">
              <th *matHeaderCellDef mat-header-cell mat-sort-header> {{ urldata_column.name }}</th>
              <td *matCellDef="let urldata" mat-cell > 
                  {{ urldata[urldata_column.property] }}
              </td>
            </ng-container>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="secondVisibleColumns"></tr>
          <tr mat-row *matRowDef="let kw; columns: secondVisibleColumns;" class="urldata-element-row">
          </tr>

          <!-- second actions Column -->
          <ng-container matColumnDef="urldataactions">
            <th *matHeaderCellDef class="actions-cell" mat-header-cell mat-sort-header></th>
            <td *matCellDef="let urldata" class="actions-cell" mat-cell>
              <button type="button" mat-icon-button [matMenuTriggerFor]="actionsMenu" (click)="$event.stopPropagation()">
                <mat-icon>more_horiz</mat-icon>
              </button>

              <mat-menu #actionsMenu="matMenu" yPosition="below" xPosition="before">
                <button (click)="deleteURLData(url, urldata)" mat-menu-item>
                  <span>Delete URL Data</span>
                </button>
              </mat-menu>
            </td>
          </ng-container>

        </table>

      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="visibleColumns"></tr>
  <tr mat-row *matRowDef="let url; columns: visibleColumns;"
      class="url-element-row"
      [class.example-expanded-row]="expandedElement === url"
      (click)="expandedElement = expandedElement === url ? null : url">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

  <!-- actions Column -->
  <ng-container matColumnDef="actions">
    <th *matHeaderCellDef class="actions-cell" mat-header-cell mat-sort-header></th>
    <td *matCellDef="let row" class="actions-cell" mat-cell>
      <button type="button" mat-icon-button [matMenuTriggerFor]="actionsMenu" (click)="$event.stopPropagation()">
        <mat-icon>more_horiz</mat-icon>
      </button>

      <mat-menu #actionsMenu="matMenu" yPosition="below" xPosition="before">
        <button (click)="updateURL(row)" mat-menu-item>
          <span>Add URL Data</span>
        </button>
        <button (click)="deleteURL(row)" mat-menu-item>
          <span>Delete URL</span>
        </button>
      </mat-menu>
    </td>
  </ng-container>

</table>

这是我用于更新表格的打字稿，简化了，因为它是一个很大的文件：

// Get URL Data
subject$: ReplaySubject<urlData[]> = new ReplaySubject<urlData[]>(1);
data$: Observable<urlData[]> = this.subject$.asObservable();
url_data: urlData[];

// Expanded Element
expandedElement: null;

@Input()
  url_columns: []; // all columns listed here

pageSize = 10;
URLDataSource: MatTableDataSource<urlData> | null;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

get visibleColumns() {
  return this.url_columns.filter(column => column.visible).map(column => column.property);
}


updateURL(url) {
    this.dialog.open(URLCreateUpdateComponent, { height: '325px', width: '600px' }).afterClosed().subscribe((url: urlData) => {
      // Some stuff happens here
      .this.http.post<Data>('http://localhost:3000/api', url).subscribe(data => {
        this.url_data.push(data); 
        this.subject$.next(this.url_data);
        this.data$.pipe(
          filter(Boolean)
        ).subscribe((url_data) => {
          this.url_data = url_data;
          this.URLDataSource.data = url_data;
        });
      });
    });
};

在这里可以做什么？