角材质表扩展桌子排不扩大？

Question

我在这个一直盯着太久，我也搞不清楚。

这里有一个角材质表与此计算器answer可扩展行一个很好的例子。我可以插入的例子在我的应用程序，它工作正常。

我无法的例子应用到我的数据。我想我的问题是在HTML，因为该表呈现，扩大行CSS似乎得到应用（行划定上点击第一行消失），但扩张的行不会出现。

有没有人看到这个问题？提前致谢。

这里是什么，我有一个StackBlitz。我已经把工作示例从链接SO answer在并排与我断例子

./tweets-table/tweets-table.component.同时:

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>

我觉得我的数据源对象是好的。但是，我有一个很难得到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

在连接方法要返回错误的东西。它应该返回行而不是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);
}

鸣叫，table.component.ts

这也有一个错误的方法isExpansionDetailRow应该返回一个布尔值true或false（什么都不做）。所以添加的回报。原始代码不需要回报，因为它只是使用没有括号一行。

如果箭头功能简单地返回的一行代码，你可以省略声明括号和返回关键字。这告诉箭头函数返回的声明。参考=> 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