您可以使用Angular Material的mat-table组件和matExpansionPanel组件来实现带有可展开行的表格,并在行按钮点击时停止展开。以下是一个示例代码:
在app.module.ts文件中导入所需的模块:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatExpansionModule } from '@angular/material/expansion';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatTableModule,
MatExpansionModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在app.component.ts文件中定义表格的数据和展开状态:
import { Component } from '@angular/core';
export interface TableRow {
name: string;
age: number;
city: string;
expanded: boolean;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
dataSource: TableRow[] = [
{ name: 'John', age: 25, city: 'New York', expanded: false },
{ name: 'Alice', age: 30, city: 'London', expanded: false },
{ name: 'Bob', age: 35, city: 'Paris', expanded: false }
];
toggleExpansion(row: TableRow): void {
row.expanded = !row.expanded;
}
}
在app.component.html文件中使用mat-table和matExpansionPanel来展示可展开行的表格:
Name
{{row.name}}
Age
{{row.age}}
City
{{row.city}}
Actions
Additional details for {{row.name}}
Age: {{row.age}}
City: {{row.city}}
在上述代码中,我们使用mat-table组件来展示表格数据,并在最后一列添加了一个按钮,用于展开/收起行的附加详细信息。当按钮被点击时,调用toggleExpansion方法来切换展开状态。同时,我们使用matExpansionPanel组件来显示行的附加详细信息。
希望这个示例能帮助您解决问题!