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
}

Answer 2

只需在您的函数中传递您的pin数据的实例，即您正在按以下方式调用div：

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

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

          </div>  
      </mat-tab>

我已经传递了pin数据的pin实例，并将其捕获到您的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;
    });  

    }

    setClickedRow( index, rowData)
       console.log("row data", rowData);
    }

Answer 3

您在标记中使用setClickedRow作为函数，但在打字稿文件中将其定义为属性。删除构造函数中的代码。取而代之，

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

Answer 4

我在这里找到了答案，这也可能对其他人有帮助

https://angular.io/tutorial/toh-pt2 https://stackblitz.com/angular/xongoyjllpr?file=src%2Fapp%2Fheroes%2Fheroes.component.ts

如何使用angular 2+和打字稿

4 个答案: