Vyhledávání na webu

html - Angular Material tabulka s rozbalitelnými řádky, automaticky rozbaleno při změně záložek s příkladem na StackBlitz

Mám tabulku Angular Material s rozbalovacími řádky. V každém řádku mám více záložek. Na první záložce mám další tabulku s rozbalovacími řádky. Na začátku jsou všechny řádky sbalené, zatím vše v pořádku. Když kliknu na řádek, řádek se rozbalí, opět vše v pořádku. Když změním záložky a vrátím se zpět, všechny mé řádky jsou rozbalené. Jak mohu tento problém vyřešit? HTML kód je jako Angular Material popisuje na své stránce pro tabulku s rozbalovacími řádky.

Vytvořil jsem StackBlitz se svým problémem, je to méně komplikovaný soubor než ten, který mám, ale má stejný problém.

Výsledek :

https://angular-wat7fa.stackblitz.io

Kód :

https://stackblitz.com/edit/angular-wat7fa-wzk7sh?file=app/table-expandable-rows-example.html

Poté, co jsem přepnul záložky a vrátil se na záložku Zprávy

Část mého HTML souboru

  <table
    mat-table
    [dataSource]="messages.results"
    multiTemplateDataRows
    class="mat-elevation-z0 messages-table"
  >
    <ng-container matColumnDef="enqueuedTimeUtc">
     All my columns
    </ng-container>

  

    <ng-container matColumnDef="info">
      <th mat-header-cell *matHeaderCellDef>Info</th>
      <td mat-cell *matCellDef="let context">
        <i
          [appTooltip]="customerInfo"
          [appTooltipContext]="context"
          class="material-icons info-icon"
          >info</i
        >
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
      <td
        mat-cell
        *matCellDef="let element"
        [attr.colspan]="displayedColumns.length"
        class="locations-cell"
      >
        <div
          class="example-element-detail"
          [@detailExpand]="
            element == expandedElement ? 'expanded' : 'collapsed'
          "
        >        

          <td-code-editor
            [style.height.px]="200"
            editorStyle="border:0;"
            theme="vs"
            [editorOptions]="editorOptions"
            [(ngModel)]="element.messageBody"
          >
          </td-code-editor>
         
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let element; columns: displayedColumns"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element"
    ></tr>
    <tr
      mat-row
      class="example-detail-row"
      *matRowDef="let row; columns: ['expandedDetail']"
    ></tr>
  </table>
  <app-paginator
    [itemsPerPage]="20"
    [numberOfEntries]="messages?.totalCount"
    [currentPage]="page$ | async"
    (pageChanged)="pageChange$.next($event)"
  ></app-paginator>

Část souboru Typescript:

expandedElement = null;

Doufám, že mi tu někdo může pomoci.

Odpověď č. 1

Našel(a) jsem svou odpověď. Zřejmě musím přidat <ng-template matTabContent></ng-template> do <mat-tab>

Související články