Angular 6 - 点击切换按钮获取行数据_编程开发

Angular 6 - 点击切换按钮获取行数据

创始人

2024-10-16 01:01:27

0次

在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方法中，你可以进一步处理行数据，比如将其发送到服务器或在控制台中打印出来。

这样，当用户点击按钮时，就可以获取到对应行的数据了。

上一篇：Angular 6 - 点击创建下一个（子/表单）组件。点击复制组件。生成多个子表单。

下一篇：Angular 6 - 点击项目时切换类，并切换其他项目的类

Angular 6 - 点击切换按钮获取行数据

相关内容

热门资讯