Question

我盯着这个眼睛已经太久了，我想不通。

在此stackoverflow answer中，有一个很好的示例Angular Material表，其中包含可扩展的行。我可以将示例插入我的应用程序，并且可以正常工作。

我无法将示例应用于我的数据。我认为我的问题出在HTML中，因为表格已呈现，因此似乎已应用扩展行CSS（单击第一行时行描述消失了），但是扩展行却没有出现。

有人看到这个问题吗？预先感谢。

这是我所拥有的StackBlitz。我已将链接的SO answer中的工作示例与坏掉的示例并排放置

./ tweets-table / tweets-table.component.ts：

import { Component, OnInit } from '@angular/core';

import { animate, state, style, transition, trigger } from '@angular/animations';

import { Tweet } from '../tweet';
import { TweetService } from '../tweet.service';
import { TweetsDataSource } from '../tweets.datasource';
import { data } from '../mock-tweets';

@Component({
selector: 'app-tweets-table',
templateUrl: './tweets-table.component.html',
styleUrls: ['./tweets-table.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 TweetsTableComponent implements OnInit {
// Data
displayedColumns = [
    'createdTime', 'tweetText', 'favoriteCount'
];
tweets: Tweet[];
expandedTweet: any;
dataSource: TweetsDataSource|null;

constructor(private tweetService: TweetService) {
}

ngOnInit() {
    this.getTweets();
}

getTweets(): void {
    // this.tweets = this.tweetService.getTweets(this.pageIndex, this.pageSize);
    this.tweets = data;
    this.dataSource = new TweetsDataSource(this.tweets);
}

isExpansionDetailRow = (i: number, row: Object) => {
    row.hasOwnProperty('detailRow');
}

}

./ tweets-table / tweets-table.component.html：

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

    <!-- Time Column -->
    <ng-container matColumnDef="createdTime">
        <mat-header-cell *matHeaderCellDef> Tweet Time </mat-header-cell>
        <mat-cell *matCellDef="let tweet"> {{tweet.created_time}} </mat-cell>
    </ng-container>

    <!-- Text Column -->
    <ng-container matColumnDef="tweetText">
        <mat-header-cell *matHeaderCellDef> So Texty </mat-header-cell>
        <mat-cell *matCellDef="let tweet"> {{tweet.text}} </mat-cell>
    </ng-container>

    <!-- Favs Column -->
    <ng-container matColumnDef="favoriteCount">
        <mat-header-cell *matHeaderCellDef> Flava Favs </mat-header-cell>
        <mat-cell *matCellDef="let tweet"> {{tweet.favorite_count}} </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 detail"> 
        Walk before you run. Here's more text: {{detail.tweet.text}}
        </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]="expandedTweet == row"
            (click)="expandedTweet = row"></mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
            [@detailExpand]="row.element == expandedTweet ? 'expanded' : 'collapsed'"
            style="overflow: hidden"> 
    </mat-row>
    </mat-table>
</div>

我认为我的DataSource对象还可以。但是，我很难完全了解MatDataSource，所以我也将其包括在内。

./tweets.datasource.ts:

import { Component, OnInit } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable, of } from 'rxjs';

import { Tweet } from './tweet';
import { TweetService } from './tweet.service';


export class TweetsDataSource extends DataSource<Tweet> {
    constructor(private tweets: Tweet[]) {
        super();
    }

    connect(): Observable<Tweet[]> {
        const rows = [];
        this.tweets.forEach(element => rows.push(element, { detailRow: true, element }));
        console.log('dataset rows:')
        console.log(rows);
        return of(this.tweets);
    }

    disconnect() { }
}

Answer 1

tweets.datasource.ts

在connect方法中，您返回错误的内容。它应该返回行，而不是 this.tweets 。

connect(): Observable<Tweet[]> {
    const rows = [];
    this.tweets.forEach(tweet => rows.push(tweet, { detailRow: true, tweet }));
    console.log('dataset rows:')
    console.log(rows);
    return of(rows);
}

tweets-table.component.ts

这也有一个错误，方法 isExpansionDetailRow 应该返回布尔值true或false（不执行任何操作）。因此添加收益。原始代码不需要返回，因为它只使用一行而不使用方括号。

如果箭头函数仅返回一行代码，则可以省略语句括号和return关键字。这告诉箭头函数返回该语句。参考=> https://codeburst.io/javascript-understand-arrow-function-syntax-ab4081bba85b

  isExpansionDetailRow = (i: number, row: Object) => {
    return row.hasOwnProperty('detailRow');
  }

如果您对执行此操作的另一种方法感兴趣，可以参考此问题。

MatTable Expand Collapse Icon issue on pagination and sort

角材料表可扩展表行未扩展？

1 个答案: