我正在使用Angular 4和材料开发应用程序。我试图使用材料表，现在我想让它的行可折叠。任何人都可以帮我吗？
HTML：
<section class="container-fluid no-padding">
<div class="row panel">
<div class="row">
<div class="right-section col-md-4">
<span id="volunteer">
داوطلب
</span>
<span id="dot">
.
</span>
<span id="volunteers-population" class="PersianNumber">
2341 نفر
</span>
<span class="sorting-title">
مرتب سازی براساس:
</span>
<div id="select-option">
<!-- <select id="select-sorting">
<option value="volvo">تاریخ ثبت نام</option>
<option value="saab">تاریخ ثبت نام</option>
<option value="mercedes">تاریخ ثبت نام</option>
<option value="audi">تاریخ ثبت نام</option>
</select> -->
<mat-form-field>
<mat-select dir="rtl" [(ngModel)]="selectedValue">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="left-section col-md-3 col-md-offset-3">
<button mat-button class="icon-button" (click)="log(1111)">
<i class="material-icons base-icon ">search</i>
</button>
<button mat-button class="filter-button">
<span>
فیلتر کردن
</span>
<i class="material-icons">filter_list</i>
</button>
<button mat-button class="add-button">
<span class="add-text">
اضافه کردن
</span>
<img src="../../assets/icon/folder.png" alt="" class="add-icon">
<!-- <i class="material-icons add-icon">create_new_folder</i> -->
</button>
<button mat-button class="icon-button">
<i class="material-icons base-icon">more_vert</i>
</button>
</div>
</div>
<div class="row">
<div class="table-container" id="data-table">
<mat-table dir="rtl" #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef class="position-header-class"> ردیف </mat-header-cell>
<mat-cell *matCellDef="let element" class="position-class PersianNumber">
<i class="material-icons position-arrow">keyboard_arrow_down</i>
<span class="position-number">
{{element.position}}
</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="reset">
<mat-header-cell *matHeaderCellDef class="reset-class">
<mat-checkbox [(ngModel)]="checked"></mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let element" class="reset-class">
<mat-checkbox [(ngModel)]="checked"></mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="avatar">
<mat-header-cell *matHeaderCellDef class="avatar"> </mat-header-cell>
<mat-cell *matCellDef="let element" class="avatar">
<img class="table-profile-picture" src="{{element.avatar}}" alt=""> </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef class="avatar"> نام </mat-header-cell>
<mat-cell *matCellDef="let element" class="avatar"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="last_name">
<mat-header-cell *matHeaderCellDef class="avatar"> نام خانوادگی </mat-header-cell>
<mat-cell *matCellDef="let element" class="avatar"> {{element.last_name}} </mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="father_name">
<mat-header-cell *matHeaderCellDef class="avatar"> نام پدر </mat-header-cell>
<mat-cell *matCellDef="let element" class="avatar"> {{element.father_name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="gender">
<mat-header-cell *matHeaderCellDef class="avatar"> جنسیت </mat-header-cell>
<mat-cell *matCellDef="let element" class="avatar"> {{element.gender}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ragistration_date">
<mat-header-cell *matHeaderCellDef class="reg-date"> تاریخ ثبت نام </mat-header-cell>
<mat-cell *matCellDef="let element" class="reg-date PersianNumber"> {{element.registration_date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="plan">
<mat-header-cell *matHeaderCellDef> طرح </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-chip-list>
<mat-chip *ngIf="element.plan[0]">{{element.plan[0]}}</mat-chip>
<mat-chip *ngIf="element.plan[1]"> {{element.plan[1]}}</mat-chip>
<!-- <mat-chip *ngIf="checkPlanLength(element.plan)">
<i class="material-icons">more_horiz</i>
</mat-chip> -->
</mat-chip-list>
</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef class="plan"> وضعیت </mat-header-cell>
<mat-cell *matCellDef="let element" class="plan" style="color: #4caf50">
{{element.status}}
<div class="green-dot">
</div>
<button mat-button class="icon-button more-icon">
<i class="material-icons ">more_vert</i>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let index=index"></mat-row>
</mat-table>
</div>
</div>
<div class="row ">
<div class="col-md-2 paginator">
<button mat-button class="icon-button">
<i class="material-icons base-icon">keyboard_arrow_right</i>
</button>
<button mat-button class="icon-button" id="page-button">
<span id="page-num" class="PersianNumber">
صفحه 1
</span>
<i class="material-icons base-icon">keyboard_arrow_down</i>
</button>
<button mat-button class="icon-button">
<i class="material-icons base-icon">keyboard_arrow_left</i>
</button>
</div>
<div class="col-md-2 col-md-offset-3 left-side-pagination ">
<select name="" id="page-size" class="PersianNumber">
<option value="10" >10</option>
</select>
<span class="title ">
تعداد نمایش در هر صفحه:
</span>
</div>
</div>
</div>
</section>
TS代码：
import { Component } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Component({
templateUrl: './volunteers.component.html',
styleUrls: ['./volunteers.component.scss']
})
export class Volunteers {
checked = true;
foods = [
{ value: 'steak-0', viewValue: 'تاریخ ثبت نام' },
{ value: 'pizza-1', viewValue: 'جنسیت' },
{ value: 'tacos-2', viewValue: 'وضعیت' }
];
selectedValue: string = this.foods[0].value;
displayedColumns = ['position','reset','avatar', 'name', 'last_name', 'father_name', 'gender', 'ragistration_date', 'plan', 'status'];
dataSource = new ExampleDataSource();
checkPlanLength(inputArray): boolean{
console.log(inputArray > 2)
return inputArray.length > 2;
}
log(input) :void{
console.log(input);
}
}
export interface Element {
position: number;
avatar:string;
name: string;
last_name: string;
father_name: string;
gender: string;
registration_date: string;
plan: string[];
status: string;
}
const data: Element[] = [
{ position: 1, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم'], status: 'تایید شده' },
{ position: 2, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: [ 'اول', 'دوم'], status: 'تایید شده' },
{ position: 3, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
{ position: 4, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: [], status: 'تایید شده' },
{ position: 5, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
{ position: 6, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم','چهارم' ], status: 'تایید شده' },
{ position: 7, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
{ position: 8, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
{ position: 9, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' },
{ position: 10, avatar:'../../assets/img/profile_user.jpg' , name: 'شاکره', last_name: 'مبارک', father_name: 'جمشید', gender: 'دختر', registration_date: '95/5/13', plan: ['سوم', 'اول', 'دوم'], status: 'تایید شده' }
];
/**
* Data source to provide what data should be rendered in the table. The observable provided
* in connect should emit exactly the data that should be rendered by the table. If the data is
* altered, the observable should emit that new set of data on the stream. In our case here,
* we return a stream that contains only one set of data that doesn't change.
*/
export class ExampleDataSource extends DataSource<any> {
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<Element[]> {
return Observable.of(data);
}
disconnect() { }
}
如您所知，我们不能使用材料扩展面板在这里，那么什么是解决方案？是否有为此准备的任何其他组件或模块，或者您必须由您自己实现它？
mat-table现在使用when谓词可折叠行
编辑：删除示例，因为人们显然希望1岁的例子仍然适用于不断发展的平台。