Невозможно расширить ряд матов

Question

Я пытаюсь отобразить таблицу и развернуть строки при их щелчке, чтобы отобразить дополнительную информацию.

У меня есть следующий HTML / TS, отображающий таблицу без проблем, но когда я добавляю код подключения - строки не реагируют на щелчок, и строки выводятся в консоли как «[]».

Html:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <!-- Position Column -->
    <ng-container matColumnDef="Name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let apptestlist"> {{apptestlist.Name}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="AppCount">
      <mat-header-cell *matHeaderCellDef> Application Count </mat-header-cell>
      <mat-cell *matCellDef="let apptestlist"> {{apptestlist.Apps.length}} </mat-cell>
    </ng-container>

    <!-- Expanded Content Column - The detail row is made up of this one column -->
    <ng-container matColumnDef="expandedDetail">
      <mat-cell *matCellDef="let apptestlist"> 
        The symbol for {{apptestlist.Name}} is Banana
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"
            matRipple 
            class="element-row" 
            [class.expanded]="expandedElement == row"
            (click)="expandedElement === row? expandedElement = null : expandedElement = row"></mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
            [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
            style="overflow: hidden"> 
    </mat-row>
  </mat-table>
</div>

TS:

import { Component, OnInit } from '@angular/core';
import { AppTestListService } from '../services/app-test-list-service'
import { AppTestList } from '../models/AppTestList';
import { DataSource } from '@angular/cdk/table';
import { Observable, of } from 'rxjs';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-application-test-lists',
  templateUrl: './application-test-lists.component.html',
  styleUrls: ['./application-test-lists.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('expanded', style({ height: '*', visibility: 'visible' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})

export class ApplicationTestListsComponent implements OnInit {

  constructor(private appTestListService: AppTestListService) { }

  dataSource = new AppTestListDataSource(this.appTestListService);
  displayedColumns = ['Name', 'AppCount'];
  appTestLists: AppTestList[];
  loading = true;
  isExpansionDetailRow = (i: number, row: Object) => row.hasOwnProperty('detailRow');
  expandedElement: any;

  ngOnInit() {
  }
}

export class AppTestListDataSource extends DataSource<any> {
  constructor(private appTestListService: AppTestListService) {
    super();
  }
  connect(): Observable<AppTestList[]> {
    return this.appTestListService.list();
  }
  disconnect() {}
}

Это выглядит так, как я хочу:

Я хочу иметь возможность расширять строки и отображать некоторую дополнительную информацию, например,

<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let apptestlist"> 
    The symbol for {{apptestlist.Name}} is Banana
  </mat-cell>
</ng-container>

Однако это не работает ..

Я изменил свой метод подключения на следующий, но он возвращается до того, как произошли какие-либо изменения:

  connect(): Observable<AppTestList[]> {
    const rows = [];
    let data = this.appTestListService.list();
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    console.log(rows);
    return of(rows);
  }

список ():

  public list(): Observable<AppTestList[]> {
    return this.httpClient
      .get<AppTestList[]>(`${this.url}/${this.endpoint}`);
  }

Answer 1

Поскольку AppTestListService.list() возвращает Observable изначально или без записей, оно присваивается вашей переменной data, и ваши forEach, console.log и return of(rows) завершаются до завершения .get.извлечение записей.

Вам нужно будет обернуть эту часть в подписку, чтобы убедиться, что это происходит, когда вы знаете, что у вас есть данные из .get

Также Примечание:

{{apptestlist.Name}} ничего не значит для вашей строки сведений, вместо этого вы можете захотеть {{apptestlist.element.Name}}.

connect(): Observable<AppTestList[]> {
       const rows = [];
       this.appTestListService.list().subscribe(val=>{
         val.forEach(element => rows.push(element, { detailRow: true, element }));
       })
       return of(rows);
     }

Stackblitz

https://stackblitz.com/edit/angular-golnkq?embed=1&file=app/table-basic-example.html