要实现Angular 2+中的表格行详情功能,你可以按照以下步骤进行操作。
Name
Email
Action
{{ user.name }}
{{ user.email }}
{{ selectedUser.name }} Details
Email: {{ selectedUser.email }}
Phone: {{ selectedUser.phone }}
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
users = [
{ name: 'John Doe', email: 'john@example.com', phone: '1234567890' },
{ name: 'Jane Smith', email: 'jane@example.com', phone: '9876543210' },
{ name: 'Bob Johnson', email: 'bob@example.com', phone: '5555555555' }
];
selectedUser: any;
showDetails(user: any) {
this.selectedUser = user;
}
}
在父组件中,当用户点击“Show Details”按钮时,你可以将选中的用户对象存储在一个变量(例如selectedUser
)中。
在父组件的模板中,使用*ngIf
指令来根据selectedUser
是否存在来显示行详情。
在行详情容器中显示选中用户的详细信息。
以上是一个基本的示例,你可以根据自己的需求进行修改和扩展。