具有可扩展行的角形材料表，在更改选项卡时会自动扩展使用stackBlitz示例 [英] Angular material Table with expandable rows, automaticly expanded when change tabs With stackBlitz example

问题描述

我有一个带有可扩展行的Angular材质表.在每一行中，我都有多个标签，在第一个选项卡上，我有另一个带有可扩展行的表.最初，所有行都折叠了，到目前为止效果很好.当我单击一行时，该行再次展开，到目前为止，效果很好.当我更改选项卡并返回时，所有行都将展开.我该如何解决这个问题?HTML代码就像Angular材料在其页面上针对具有可扩展行的表所描述的那样.

我用我的问题创建了一个StackBlitz，它比我所拥有的文件要简单一些，但是存在相同的问题.

结果:

切换标签并返回邮件"标签后

我的HTML文件的一部分

 <表垫子桌子[dataSource] ＝"messages.results".multiTemplateDataRowsclass ="mat-elevation-z0 messages-table">< ng-容器matColumnDef ="enqueuedTimeUtc">我所有的专栏</ng-container>< ng-容器matColumnDef =信息">< mat-h​​eader-cell * matHeaderCellDef> Info</th>< td mat-cell * matCellDef ="let context">< i[appTooltip] ="customerInfo"[appTooltipContext] =上下文"；class ="material-icons info-icon"；> info</i></td></ng-container>< ng-容器matColumnDef ="expandedDetail">< td垫细胞* matCellDef ="let element"[attr.colspan] ＝"displayedColumns.length".class ="locations-cell">÷ divclass ="example-element-detail"[@detailExpand] ="元素== ExpandedElement?'expanded':'collapsed'">< td代码编辑器[style.height.px] ="200"editorStyle =" border:0;"theme ="vs"[editorOptions] ="editorOptions"[(ngModel)] ＝"element.messageBody"；></td-code-editor></div></td></ng-container>< tr mat-h​​eader-row * matHeaderRowDef ="displayedColumns">/tr;< tr垫行* matRowDef ="let元素；专栏:displayedColumns"class ="example-element-row"[class.example-expanded-row] ="expandedElement ===元素"；(点击)＝"expandedElement ＝ expandedElement ＝＝＝元素?null:元素></tr>< tr垫行class ="example-detail-row"* matRowDef =让行；列:['expandedDetail']"></tr></table>< app-paginator[itemsPerPage] ="20"[numberOfEntries] ="messages?.totalCount"；[currentPage] =&; page $ |异步"(pageChanged)="pageChange $ .next($ event)"；></app-paginator> 

打字稿文件的一部分:

  expandedElement = null; 

我希望有人可以在这里为我提供帮助.

解决方案

我找到了答案.显然我必须将< ng-template matTabContent></ng-template> 添加到< mat-tab>

I have an Angular material table with expandable rows. In every row, I have multiple tabs, On the first tab, I have another table with expandable rows. At the start al the rows are collapsed, so far so good. When I click a row, the row is expanded, again so far, so good. When I change tabs and come back, all my rows are expanded. How can I solve this issue? The HTML code is like Angular material describes on their page for a table with expandable rows.

I created a StackBlitz with my problem, it is a less complicated file then what I'm having, but it has the same problem.

Result:

https://angular-wat7fa.stackblitz.io

Code:

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

After I switched tabs and return to the Messages tab

Part of my HTML file

  <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>

Part of the Typescript file:

expandedElement = null;

I hope somebody can help me here.

解决方案

I found my answer. Apparentely I have to add <ng-template matTabContent></ng-template> to the <mat-tab>

这篇关于具有可扩展行的角形材料表，在更改选项卡时会自动扩展使用stackBlitz示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！