0
517
Views¿Cómo obtener el elemento de celda de la tabla HTML de la fila actual?
Tengo una mesa de material angular. Si hago clic en una fila, quiero obtener el HTMLTableCellElement de la fila seleccionada . Intenté usar viewChild pero el problema es que estoy obteniendo el elemento html de la tabla completa. Rendimiento esperado 
A continuación se muestra mi código. ¡Por favor, ayúdame a lograr este escenario! https://stackblitz.com/edit/angular-material-table-data-source-nym2vx?file=app/app.component.html
2 answers
Answer question0
En su ejemplo, cuando hace clic en una etiqueta, también puede enviar esa etiqueta a su función:
<mat-cell *matCellDef="let element" id="{{ element.position }}"> <a href="javascript:;" (click)="viewhtmlData($event.target)">{{ element.name }}</a> </mat-cell>Luego, dentro de su función, puede obtener el elemento principal de esa etiqueta, que es la celda mat que lo contiene, así:
viewhtmlData(aTag: HTMLElement) { console.log('Selected Row HtML data', aTag.parentElement); } <!-- CONSOLE OUTPUT --> <mat-cell _ngcontent-c69="" class="mat-cell cdk-column-name mat-column-name" role="gridcell" id="3"> <a _ngcontent-c69="" href="javascript:;">Lithium</a> </mat-cell>0
Hay dos cambios que puede hacer a partir de la muestra que ha proporcionado.
Cambio: 1 (en el lado .html) Pase el evento a través de la función: viewhtmlData()
<a href="javascript:;" (click)="viewhtmlData()">{{ element.name }}</a>a
<a href="javascript:;" (click)="viewhtmlData(element)">{{ element.name }}</a>Cambio 2: (en el lado .ts) Pase el elemento a través de la función
// This function will show entire table contents viewhtmlData() { console.log('Selected Row HtML data',this.table); }a
// The element data from .html is passed through the function viewhtmlData($event) { console.log('Selected Row HtML data',$event); this.selectedElement =$event; var Row = document.getElementById($event.position) as HTMLTableCellElement; this.selectedCellHtml = Row; console.log('Selected Row HtML data',this.selectedCellHtml); }Para obtener más información, puede consultar el siguiente ejemplo: https://stackblitz.com/edit/angular-material-table-data-source-gpybg5?file=app%2Fapp.component.ts