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

Question

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

到目前为止我完成的代码是，

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>

component.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;
  });
}
}

Answer 1

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

(click)="setClickedRow(pin )"

setClickedRow(pin ){

   this.selectedRow = pin
}