时间戳

首页 > 解决方案 > 如何使用 angular 2+ 和 typescript 获取选定行的元素并显示它

angular - 如何使用 angular 2+ 和 typescript 获取选定行的元素并显示它

问题描述

我正在使用一个表格，当我单击表格中的特定行时，我必须捕获数据并单独显示它，我能够突出显示选定的行，并捕获行号。并展示它。我不确定如何捕获所选行中的项目并显示它。

到目前为止我所做的代码是，

HTML 标记：

<mat-tab label="PINS" flex>
    <div id="pinsDataSource" *ngFor="let pin of pins; let i = index" (click)="setClickedRow(i)" [class.alertactive]="i == selectedRow">

              {{pin.alertTitle}}  
              {{pin.alertCode}} 
              {{pin.date | date:'MM/dd/yyyy'}}

    </div>  
</mat-tab>

在这里，我想展示我从该特定行中选择的项目，例如：

<div>
  Selected Row :
  <strong>{{selectedRow}}</strong>
</div>

组件.ts 文件：

pins: any[];
selectedRow: Number;
setClickedRow: Function;

constructor(private proService: ProService) {
  this.setClickedRow = function (index) {
    this.selectedRow = index;
  }
}

ngOnInit() {
  // here the table items are called from webapi
  this.proService.getPinnedAlerts().subscribe(res => {
    this.pins = res;
  });
}
}

标签： angulartypescriptngfor

解决方案

将对象作为参数传递给函数并将参数分配给selectedRow

(click)="setClickedRow(pin )"

setClickedRow(pin ){

   this.selectedRow = pin
}

推荐阅读