angular - MatTablen laajenna/supista kuvakeongelma sivutuksessa ja lajittelussa

Minulla on Angular Material -taulukko, joka käyttää detailRow-direktiiviä lisätäkseen yksityiskohtaisen/vierekkäisen rivin taulukkoriville.

StackBlitz

Halusin antaa sille vaikutelman ikään kuin riviä laajennettaisiin tai supistettaisiin, joten lisäsin siihen pari kuvaketta, joita vaihdetaan napsautettaessa solua, joka sisältää ne.

<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <mat-cell *matCellDef="let element"> 
         <button mat-icon-button color="primary"  (click)="element[i] = !element[i]">
            <mat-icon id="expand_more"  #expand_more *ngIf="!element[i] "  >expand_more</mat-icon>
            <mat-icon id="expand_less"  #expand_less *ngIf="element[i] ">expand_less</mat-icon>
          </button> 
      </mat-cell>

Kuitenkin jos jätän rivin laajennetuksi ja sivutan tai teen lajittelun, kuvakkeet eivät vaihdu, koska niitä ei voi vaihtaa.

Olen yrittänyt kytkeytyä page-tapahtumaan tai sortChange-tapahtumaan, mutta en saanut mitään aikaan.

Tiedän, että Angular Material v7:ssä on uusi tapa tehdä laajennus/pienennys, joka todennäköisesti toimii hyvin sivutuksen ja lajittelun kanssa, mutta päivitykseen menee vielä hetki. Sillä välin onko kenelläkään ideoita, miten tämä voisi ratkaista.

Vastaus #1

Lyhyt vastaus

Lisää tämä tiedostoon cdk-detail-row.directive.ts

  ngOnDestroy(): void {
    this.row[undefined] = false;
  }

Pitkä vastaus

Ensinnäkin, napsautuksen käsitellään kahdessa paikassa, kerran mat-rivissä ja toisessa mat-solussa (ikonin napsauttaminen laukaisee molemmat tapahtumat. Napsauttamalla rivin muissa kohdissa laukaistaan vain onToggleChange). Ja myös tämä element[i]=!element[i] on temppu - (muuttuja i on määrittelemätön). Joten jos napsautat rivin muissa kohdissa, laajennusikoni ei muutu; tästä syystä olin hämmentynyt, koska luulin, että sen ei pitäisi muuttua. Esimerkki poistaa vain napsautuksen mat-solusta yksinkertaistamiseksi.

Tiedostossa table-basic-example.html sinun tulisi poistaa siitä (click) -tulos ja lisätä rivin argumentti menetelmään onToggleChange($event, row). Ja muuta *ng-if kuuntelemaan element.close-signaalia sen sijaan

<ng-container matColumnDef="expandCollapse">
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
  <mat-cell *matCellDef="let element"> 
     <button mat-icon-button color="primary">
        <mat-icon id="expand_more"  #expand_more *ngIf="!element.close"  >expand_more</mat-icon>
        <mat-icon id="expand_less"  #expand_less *ngIf="element.close">expand_less</mat-icon>
      </button> 
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
        class="element-row"
        [cdkDetailRow]="row" [cdkDetailRowTpl]="tpl"
        (toggleChange)="onToggleChange($event, row)">
</mat-row>

taulukko-perusesimerkki.ts

Lisää sulje-ominaisuus käyttöliittymäelementtiin

export interface Element {
    name: string;
    position: number;
    weight: number;
    symbol: string;
    close?: boolean;
}

Nyt käsittelemme rivin sulkemisen ja avaamisen onToggleChange-metodissa.

onToggleChange(cdkDetailRow: CdkDetailRowDirective, row: Element): void {
    if (this.singleChildRowDetail && this.openedRow && this.openedRow.expended) {
        this.openedRow.toggle();
    }
    if (!row.close) {
        row.close = true;
    } else {
        row.close = false;
    }
    this.openedRow = cdkDetailRow.expended ? cdkDetailRow : undefined;
}

Viimeiseksi, tiedostossa cdk-detail-row.directive.ts haluamme sulkea rivin, kun direktiivi poistetaan käytöstä sivutuksen tai vaihtamisen seurauksena. Joten toteutamme onDestroy-menetelmän

export class CdkDetailRowDirective implements OnDestroy{
     ...Details of implementation.....
}

Uuden ngOnDestroy-metodin pitäisi näyttää tältä

ngOnDestroy(): void {
  this.row.close = false;
}