我们可以在表格中添加一个“操作”列,其中包含可以对特定行执行操作的按钮。代码示例:
HTML:
Name
Email
Action
{{ user.name }}
{{ user.email }}
在上面的代码中,我们创建了一个包含“名称”、“电子邮件”和“操作”列的表格。在操作列中,我们添加了“编辑”和“删除”按钮,并为每个按钮添加了相应的点击事件。
TypeScript:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
Name
Email
Action
{{ user.name }}
{{ user.email }}
`
})
export class AppComponent {
users = [
{ name: 'John Doe', email: 'john.doe@example.com' },
{ name: 'Jane Smith', email: 'jane.smith@example.com' },
{ name: 'Bob Johnson', email: 'bob.johnson@example.com' }
];
editUser(user) {
console.log(`Editing ${user.name} (${user.email})...`);
}
deleteUser(user) {
console.log(`Deleting ${user.name} (${user.email})...`);