Issue
I am struggling to think of or find a solution for this (fairly common) scenario:
Pre-req: Users have the ability to define a heading.
Outcome: Foreach heading, it will create a row & column in a table (of the defined heading) where the cell value will be a checkbox.
# Test1|Test2|Test3
Test1 x
Test2 x x
Test3 x
I need to be able to track that [1,1].value = true
and [2,1].value = false
etc.
As this is a POC I can hardcode the data I need for now.
My first thought was to create a Matrix Object which stored: RowData
(name
& position
), ColumnData
(name
& columnPosition
) and had value
and position
(takes row & column data position and combines).
HTML:
<table mat-table [dataSource]="weightMatrix" class="mat-elevation-z8">
<ng-container matColumnDef="#">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let element"> {{element.row}}</td>
</ng-container>
<ng-container *ngFor="let column of weightingComponents" [matColumnDef]="column.name">
<th mat-header-cell *matHeaderCellDef> {{column.name}} </th>
<td mat-cell *matCellDef="let element"> <input type="checkbox" [(ngModel)]="element.value"> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
--
TS
import { Component, Input, OnInit } from '@angular/core';
import { WeightingComponent } from '../weighting/weighting.component';
export class TableMatrix {
rowTable: WeightingComponent;
columnTable: WeightingComponent;
position: any[];
value: boolean = false;
constructor(x: WeightingComponent, y: WeightingComponent) {
this.rowTable = x;
this.columnTable = y;
this.position = [x.position, y.position];
}
}
const SET_RULES_POC: any[] =
[
'Test1',
'Test2',
'Test3',
];
@Component({
selector: 'app-table-component',
templateUrl: './table-component.html',
styleUrls: ['./table-component.scss'],
})
export class TableComponent implements OnInit {
@Input() weightingComponents: WeightingComponent[] = []
@Input() weightMatrix: TableMatrix[] = [];
displayedColumns: any[] = [];
rules = SET_RULES_POC;
public constructor() {
}
ngOnInit(): void {
for (let i = 0; i < this.rules.length; i++) {
this.weightingComponents.push(new WeightingComponent(this.rules[i], i));
}
for (let i = 0; i < this.weightingComponents.length; i++) {
for (let j = 0; j < i + 1; j++) {
let x = this.weightingComponents[i];
let y = this.weightingComponents[j];
let matrix = new TableMatrix(x, y);
if (!this.weightMatrix?.includes(matrix)) {
this.weightMatrix?.push(matrix);
}
}
}
this.weightMatrix
SET_RULES_POC.unshift('#');
this.displayedColumns = SET_RULES_POC;
console.log(this.displayedColumns);
}
public doStuff() {
console.log(this.weightMatrix);
}
public getPosition(x: any, y: any) {
return [this.weightMatrix[x].position, this.weightMatrix[y].position];
}
}
My issue is:
- The checkboxes are all linked, when i select one, they're all updated
- I cannot seem to get the first Column defined by the same as the row
Please bear in mind this is my first Angular project and as a POC I haven't followed best practices
Solution
You can try new Map()
to store the array as a key like this,
handleClick(val) {
if (this.result.has(val)) {
this.result.delete(val);
} else {
this.result.set(val, 1);
}
}
res() {
console.log(this.result.keys()); // Iterate through the selected keys
}
Upvote if it's helpful.
Answered By - Cv Vikash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.