teniendo un problema con mi proyecto Angular. Básicamente, tengo una tabla mat con 15 filas que contiene algunos datos. Agregué casillas de verificación al final de la fila para que cuando se haga clic en la casilla de verificación y luego se presione un botón, manipule los datos llamando a una API (llamaré a la API una vez que descubra cómo pasarle los datos apropiados)
Los datos de la tabla se generan así:
HTML
<mat-table [dataSource]="dataSource$"> <ng-container matColumnDef="process"> <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell> <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell> </ng-container> <ng-container matColumnDef="reprocess"> <mat-header-cell *matHeaderCellDef> <button tslbutton class="tslbutton" (click)="reprocessHomeProcesses(checkBox)" id="reprocessButton"> Reprocess </button> </mat-header-cell> <mat-cell id="reprocessCell" *matCellDef="let execution"> <mat-checkbox class="checker" #checkBox></mat-checkbox> </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row #checkBox *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table>TS
dataSource$ = new MatTableDataSource(); //on page load dataSource$ is populated with 15 objects. These are different each time reprocessHomeProcesses(checkboxes) { console.log(checkboxes)) }No puedo acceder a los datos almacenados en "ejecución". En HTML puedo verlo por algo como esto:
<span>{{execution.process}}</span>esto devuelve el campo de proceso del objeto de ejecución.
pero no puedo pasar estos datos al TS. Intenté usar #checkBox y pasar eso como argumento para reprocesarHomeProcesses() pero esto devuelve indefinido. ¿Hay una solución más fácil para
Toda la información que necesito está en la variable de ejecución. Básicamente, cuando se marca la casilla y se presiona el botón, necesito que los datos de ejecución se envíen de vuelta a TypeScript. Pero cuando trato de pasar la ejecución como argumento a mi reprocessHomeProcesses(), regresa como indefinido, aunque la ejecución tiene los datos que están creando las filas. ¿Por qué está pasando esto?
¿No es posible enviar la ejecución de HTML a TS usando la casilla de verificación? No he tenido suerte en muchas horas.
Cualquier ayuda es apreciada.
En Angular (React y VueJs) no consulta el DOM directamente con document.querySelector(...) (o similares) .
Estos marcos están centrados en los datos, lo que necesita es definir una variable pública en su Controlador para contener los datos, y esa variable se actualizará mediante el 2-way data binding de Angular:
En la plantilla (HTML) :
<mat-table [dataSource]="dataSource$"> <ng-container matColumnDef="process"> <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell> <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell> </ng-container> <ng-container matColumnDef="reprocess"> <mat-header-cell *matHeaderCellDef> <button tslbutton class="tslbutton" (click)="reprocessHomeProcesses()" id="reprocessButton"> Reprocess </button> </mat-header-cell> <mat-cell id="reprocessCell" *matCellDef="let execution; let i = index"> <mat-checkbox class="checker" [(ngModel)]="auxiliarDataSource[i].checked"></mat-checkbox> </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row #checkBox *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> Elimine el parámetro de "reprocessHomeProcesses" y coloque [(ngModel)]="execution.checked" en la "mat-checkbox"
En el Controlador (TS) , algo como:
export class MyController { dataSource: [ { process: 1 }, { process: 2 }, ]; auxiliarDataSource: [ { checked: false, index: 0 }, { checked: false, index: 1 }, ]; void reprocessHomeProcesses() { let filteredIndex = this.auxiliarDataSource.filter(x => x.checked).map( x => x.index ); let filteredItens = this.dataSource.filter( (x,i)=> filteredIndex.indexOf(i) ) console.log( filteredItens ); } // ... more code ahead }Código no probado