要在Angular MatTable中实现在视口内居中展开的行,可以使用以下解决方法:
Name
{{element.name}}
Additional information for {{element.name}}
isExpanded
的断言方法来决定应该展开哪些行。import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
displayedColumns: string[] = ['name'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
// 断言方法,确定哪些行应该展开
isExpanded = (i: number, row: Element) => row.isExpanded;
// 点击按钮来展开行
expandRow(row: Element) {
row.isExpanded = !row.isExpanded;
}
}
// 行元素的接口定义
export interface Element {
name: string;
isExpanded?: boolean;
}
// 模拟的数据
const ELEMENT_DATA: Element[] = [
{ name: 'Element 1' },
{ name: 'Element 2' },
{ name: 'Element 3' },
];
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatExpansionModule } from '@angular/material/expansion';
@NgModule({
imports: [
MatTableModule,
MatExpansionModule
],
// ...
})
export class AppModule { }
这样就可以在Angular MatTable中实现在视口内居中展开的行了。当点击展开按钮时,相关行将在表格中展开,并在视口内居中显示。