Угловой материал таблицы расширяемая строка таблицы не расширяется?

Question

Я слишком долго смотрел на это и не могу понять.

Есть хороший пример таблицы угловых материалов с расширяемой строкой в ​​этом стеке потока ответ .Я могу подключить пример к своему приложению, и оно будет работать правильно.

Я не могу применить пример к своим данным.Я думаю, что моя проблема в HTML, так как таблица визуализируется, расширенная строка CSS, кажется, применяется (выделение строки исчезает при нажатии на первую строку), но строка расширения не появляется.

Кто-нибудьвидите проблему?Заранее спасибо.

Вот StackBlitz того, что у меня есть.Я поместил рабочий пример из связанного ответа SO рядом с моим разбитым примером

. / 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

В методе подключения вы возвращаете неправильный материал.Он должен вернуть строк вместо 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 Развернуть Свернуть Значок проблемы при разбивке на страницы и сортировке