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方法更改为以下方法，但它似乎在发生任何更改之前就返回了：

  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);
  }

list（）：

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

Answer 1

由于AppTestListService.list()返回的Observable最初有或没有记录，因此将其分配给您的data变量以及您的forEach，console.log和{ {1}}在您的return of(rows)完成检索记录之前完成。

您需要将该部分包装在订阅中，以确保当您知道来自.get的数据时会发生这种情况。

也请注意：

.get对您的详细信息行没有任何意义，您可能想要{{apptestlist.Name}}。

{{apptestlist.element.Name}}

Stackblitz

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

无法展开垫子行

1 个答案: