以下是一个使用Angular和Bootstrap的可展开行表格的示例代码:
#
Name
Email
{{ i+1 }}
{{ user.name }}
{{ user.email }}
Expanded Content for {{ expandedRow.name }}
// 在Angular组件的类文件中
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
users = [
{ name: 'User 1', email: 'user1@example.com' },
{ name: 'User 2', email: 'user2@example.com' },
{ name: 'User 3', email: 'user3@example.com' }
];
expandedRow: any;
toggleRow(index: number) {
if (this.expandedRow === this.users[index]) {
this.expandedRow = null;
} else {
this.expandedRow = this.users[index];
}
}
}
这个示例中,我们使用*ngFor
指令来循环遍历users
数组,并为每个用户生成一个表格行。当用户点击某一行时,我们调用toggleRow
方法来切换展开状态。展开的行会显示一个带有用户特定内容的card
,并跨越表格的所有列。
请注意,你需要将Bootstrap的CSS和JavaScript文件引入到你的项目中,以便正确渲染样式和交互效果。