在Angular 6中,你可以使用事件绑定和模板引用变量来实现点击切换按钮获取行数据的功能。下面是一个示例代码:
在组件的HTML模板中:
{{row.name}}
{{row.age}}
在组件的TypeScript文件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
rows = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Tom', age: 35 }
];
getRowData(row: any) {
console.log('行数据:', row);
// 在这里可以对行数据进行其他操作
}
}
在上面的代码中,我们使用了一个*ngFor
指令来遍历rows
数组,并在每行的最后一列中添加了一个按钮。当点击按钮时,调用了getRowData
方法,并将当前行的数据作为参数传递给该方法。
在getRowData
方法中,你可以进一步处理行数据,比如将其发送到服务器或在控制台中打印出来。
这样,当用户点击按钮时,就可以获取到对应行的数据了。