Angular таблица материалов с расширяемыми строками

Question

Я новичок в angular и использую angular таблицу материалов с расширяемыми строками. При загрузке страницы таблица в порядке, но когда я нажимаю на вкладку angular материала (утверждение тегов) и переключаюсь на предыдущую вкладку (список тегов), все строки раскрываются в таблице списка тегов. Кроме того, строка сворачивается только при двойном щелчке по значку списка просмотра. Любое решение приветствуется.

Ниже приведен код html:

<mat-card>
    <mat-tab-group>
        <!-- Tab for taglist table -->
        <mat-tab label="Tag List">
            <mat-card class="innercard">
                <mat-card-content class="container">
                    <table mat-table [dataSource]="dataSource_TagList" multiTemplateDataRows class="mat-elevation-z8">
                        <ng-container matColumnDef="tagname">
                            <th mat-header-cell *matHeaderCellDef>Tag Label</th>
                            <td mat-cell *matCellDef="let element"> {{element.tagname}} </td>
                        </ng-container>
                        <!-- <ng-container matColumnDef="tags">
                            <th mat-header-cell *matHeaderCellDef>Tags</th>
                            <td mat-cell *matCellDef="let element"> {{element.tags}} </td>
                        </ng-container> -->
                        <ng-container matColumnDef="author">
                            <th mat-header-cell *matHeaderCellDef>Author</th>
                            <td mat-cell *matCellDef="let element"> {{element.author}} </td>
                        </ng-container>
                        <ng-container matColumnDef="date">
                            <th mat-header-cell *matHeaderCellDef>Date</th>
                            <td mat-cell *matCellDef="let element"> {{element.date}} </td>
                        </ng-container>
                        <ng-container matColumnDef="view">
                            <th mat-header-cell *matHeaderCellDef>Actions</th>
                            <td mat-cell *matCellDef="let element; let j=renderIndex;">
                                <button mat-button style="margin-right: 2%;" matTooltip="view" [class.expanded-row]="expandedElement === null"
                                (click)="expandedElement = expandedElement === element ? null : element"><mat-icon>view_list</mat-icon></button>
                                <button mat-button style="margin-right: 2%;" matTooltip="edit" (click)="openDialogBox('edit',element)"><mat-icon>edit</mat-icon></button>
                                <button mat-button style="margin-right: 2%;" matTooltip="delete" (click)="deleteItem(j)"><mat-icon>delete</mat-icon></button>
                                <button mat-raised-button color="primary" (click)="openTags(j)">View Tags</button>
                            </td>
                        </ng-container>

                        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
                        <ng-container matColumnDef="expandedDetail">
                            <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                            <div class="detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                                <div class="element-description">
                                {{element.description}}
                                </div>
                            </div>
                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                        <tr mat-row *matRowDef="let element; columns: displayedColumns;"
                            class="element-row"
                            >
                        </tr>
                        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
                    </table>
                    <mat-paginator #TableOnePaginator="matPaginator" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
                    <br>
                    <button mat-raised-button color="primary" type="button" (click)="addNewTag()"><mat-icon>add</mat-icon>New List</button>
                </mat-card-content>
            </mat-card>
        </mat-tab>
        <!-- Tab for approval taglist table -->
        <mat-tab label="Tags Approval">
            <mat-card class="innercard">
                <mat-card-content class="container">
                        <table mat-table [dataSource]="dataSource_ApprovalTagList" class="mat-elevation-z8">
                            <ng-container matColumnDef="tagname">
                                <th mat-header-cell *matHeaderCellDef>Tag Label</th>
                                <td mat-cell *matCellDef="let element"> {{element.tagname}} </td>
                            </ng-container>
                            <!-- <ng-container matColumnDef="tags">
                                <th mat-header-cell *matHeaderCellDef>Tag List</th>
                                <td mat-cell *matCellDef="let element"> {{element.tags}} </td>
                            </ng-container> -->
                            <ng-container matColumnDef="author">
                                <th mat-header-cell *matHeaderCellDef>Author</th>
                                <td mat-cell *matCellDef="let element"> {{element.author}} </td>
                            </ng-container>
                            <ng-container matColumnDef="date">
                                <th mat-header-cell *matHeaderCellDef>Date</th>
                                <td mat-cell *matCellDef="let element"> {{element.date}} </td>
                            </ng-container>
                            <ng-container matColumnDef="view">
                                <th mat-header-cell *matHeaderCellDef>Actions</th>
                                <td mat-cell *matCellDef="let element; let j=index;">
                                    <button mat-raised-button color="primary" style="margin-right: 8%;" (click)="approve(j)">Approve</button>
                                    <button mat-raised-button color="warn" style="margin-right: 6%;" (click)="reject(j)">Reject</button>
                                    <button mat-button style="margin-right: 8%;" matTooltip="modify" (click)="openDialog('edit',element)"><mat-icon>edit</mat-icon></button>
                                </td>
                            </ng-container>
                            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                        </table>
                        <mat-paginator #TableTwoPaginator="matPaginator" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
                </mat-card-content>
            </mat-card>
        </mat-tab>
    </mat-tab-group>
</mat-card>