Как получить элементы выбранной строки и показать ее с помощью angular 2+ и машинописного текста
Я использую таблицу, и мне нужно захватить данные и показать их отдельно, когда я щелкаю определенную строку в таблице, Мне удалось выделить выбранную строку и зафиксировать номер строки. и покажи это. Я не уверен, как мне захватить элементы в выбранной строке и показать их.
Код, который я написал до сих пор,
Разметка 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;
});
}
}
Я понял это ... хотел выделить, а также зафиксировать элементы в строке, я также разместил ссылку ниже,
Ответы 4
Передайте объект как параметр функции и назначьте параметр selectedRow
(click) = "setClickedRow(pin )"
setClickedRow(pin ){
this.selectedRow = pin
}
Вы используете setClickedRow как функцию в разметке, но она определяется как свойство в файле машинописного текста. Удалите код внутри конструктора.
Вместо этого сделайте это
selectedRow: Number;
setClickedRow(i){
this.selectedRow = i;
}
constructor(private proService: ProService) {
this.setClickedRow(index);
}
Просто передайте экземпляр данных ваших контактов в свою функцию, то есть вы вызываете 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>
Я передал экземпляр данных контактов и сохранил его в вашем 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.info("row data", rowData);
}
Я нашел ответ здесь, это тоже может помочь другим
https://angular.io/tutorial/toh-pt2https://stackblitz.com/angular/xongoyjllpr?file=src%2Fapp%2Fheroes%2Fheroes.component.ts
Так что просто хотите выделить выбранную строку?