Как получить элементы выбранной строки и показать ее, используя угловые 2+ и машинопись

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

Я нашел ответ здесь, это может помочь и другим

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

Answer 2

Вы используете setClickedRow как функцию в разметке, но она определена как свойство в файле машинописи. Удалите код внутри конструктора. Вместо этого сделайте это

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

Answer 3

Просто передайте экземпляр данных ваших пинов в вашу функцию, то есть вы вызываете 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>

Я передал данные о булавках и записал их в ваш файл.

    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 4

Передать объект как параметр в функцию и присвоить параметру selectedRow

(click)="setClickedRow(pin )"

setClickedRow(pin ){

   this.selectedRow = pin
}