角度材料表可扩展表行不扩展? [英] Angular Material table expandable table row not expanding?

问题描述

我已经盯着这个太久了，我无法弄清楚.

在此 stackoverflow 中有一个带有可扩展行的 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';从'../tweet'导入{推文}；从 '../tweet.service' 导入 { TweetService };从 '../tweets.datasource' 导入 { TweetsDataSource };从'../mock-tweets'导入{数据}；@成分({选择器:'app-tweets-table'，templateUrl: './tweets-table.component.html',styleUrls: ['./tweets-table.component.css'],动画:[触发器('详细信息扩展'，[状态('折叠'，样式({高度:'0px'，minHeight:'0'，可见性:'隐藏'}))，状态('展开'，样式({高度:'*'，可见性:'可见'}))，transition('expanded <=>collapsed', animate('225ms cube-bezier(0.4, 0.0, 0.2, 1)')),]),],})导出类 TweetsTableComponent 实现 OnInit {//数据显示列 = ['createdTime'、'tweetText'、'favoriteCount'];推文:推文[];扩展推文:任何；数据源:TweetsDataSource|null;构造函数(私有推文服务:TweetService){}ngOnInit() {this.getTweets();}getTweets():无效{//this.tweets = this.tweetService.getTweets(this.pageIndex, this.pageSize);this.tweets = 数据；this.dataSource = new TweetsDataSource(this.tweets);}isExpansionDetailRow = (i: number, row: Object) =>{row.hasOwnProperty('detailRow');}}

./tweets-table/tweets-table.component.html:

<mat-table #table [dataSource]="dataSource"><!--- 请注意，这些列可以按任何顺序定义.实际呈现的列被设置为行定义上的属性" --><!-- 时间列--><ng-container matColumnDef="createdTime"><mat-h​​eader-cell *matHeaderCellDef>推文时间 </mat-h​​eader-cell><mat-cell *matCellDef="let tweet">{{tweet.created_time}} </mat-cell></ng-容器><!-- 文本列--><ng-container matColumnDef="tweetText"><mat-h​​eader-cell *matHeaderCellDef>所以 Texty </mat-h​​eader-cell><mat-cell *matCellDef="let tweet">{{tweet.text}} </ng-容器><!-- 收藏栏--><ng-container matColumnDef="favoriteCount"><mat-h​​eader-cell *matHeaderCellDef>Flava Favs </mat-h​​eader-cell><mat-cell *matCellDef="let tweet">{{tweet.favorite_count}} </mat-cell></ng-容器><!-- 扩展内容列- 详细信息行由这一列组成--><ng-container matColumnDef="expandedDetail"><mat-cell *matCellDef="let detail">跑前先走.这里有更多文字:{{detail.tweet.text}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="让行；列:displayColumns;"纹波类=元素行"[class.expanded]="expandedTweet == row"(click)="expandedTweet = row"></mat-row><mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"[@detailExpand]="row.element == expandTweet ? 'expanded' : 'collapsed'"样式=溢出:隐藏"></mat-row></mat-table>

我认为我的 DataSource 对象没问题.但是，我很难全面了解 MatDataSource，因此我也将其包括在内.

./tweets.datasource.ts:

import { Component, OnInit } from '@angular/core';从@angular/cdk/collections"导入{数据源}；import { Observable, of } from 'rxjs';从'./tweet'导入{推文}；从 './tweet.service' 导入 { TweetService };导出类 TweetsDataSource 扩展了 DataSource{构造函数(私人推文:Tweet[]){极好的();}connect(): Observable{常量行 = [];this.tweets.forEach(element => rows.push(element, { detailRow: true, element }));console.log('数据集行:')控制台日志(行)；返回(this.tweets)；}断开连接(){}}

解决方案

tweets.datasource.ts

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

connect(): Observable{常量行 = [];this.tweets.forEach(tweet => rows.push(tweet, { detailRow: true, tweet }));console.log('数据集行:')控制台日志(行)；返回(行)；}

tweets-table.component.ts

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

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

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

如果你对另一种方式感兴趣，你可以参考这个问题.

分页时的 MatTable 展开折叠图标问题并排序

I've been staring at this for too long, and I can't figure it out.

There's a good example of an Angular Material table with an expandable row in this stackoverflow answer. I can plug the example into my app, and it works correctly.

I'm failing to apply the example to my data. I think my problem is in the HTML, since the table renders, the expanded row CSS seems to get applied (the row delineation disappears on clicking the first row), but the expansion row does not appear.

Does anyone see the problem? Thanks in advance.

Here's a StackBlitz of what I have. I've put the working example from the linked SO answer in side by side with my broken example

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

I think my DataSource object is okay. However, I'm having a hard time getting a full understanding of MatDataSource, so I'll include that, too.

./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() { }
}

解决方案

tweets.datasource.ts

In the connect method you are returning the wrong stuff. It should return rows instead of 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

This also has a error the method isExpansionDetailRow should return a boolean value true or false (Not do nothing). So add the return. The original code does not need the return because it just uses one line without the brackets.

If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword. This tells the arrow function to return the statement. Reference => https://codeburst.io/javascript-understand-arrow-function-syntax-ab4081bba85b

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

If you are interested in another way of doing this you can refer to this issue.

MatTable Expand Collapse Icon issue on pagination and sort

这篇关于角度材料表可扩展表行不扩展?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！