角度-选择一个输入字段，然后单击一个单独的按钮进行增量

Question

只是尝试执行一个函数。目前，我有一个包含多个输入字段的材料表，我正在尝试执行一个功能，即当我选择/选择一个输入字段时，我可以使用单独的"+"按钮在该特定字段中进行增量。

目前，我的问题是，当我点击"+"按钮时，我不知道如何保持所选输入字段的焦点，并让函数知道我选择了哪个输入字段(目前我只能对参数进行硬编码，希望使其动态(

想知道我该怎么做吗？非常感谢。我和我现在拥有的东西有联系https://stackblitz.com/edit/angular-ivy-jmexkx?file=src%2Fapp%2Fapp.module.ts，src%2App%2Hello.component.ts，src+2App%2App.component.ts，src%2App%2App.component.html

html文件

<table mat-table [dataSource]="dataSource">
<ng-container [matColumnDef]="col.key" *ngFor="let col of columnsSchema">
<th mat-header-cell *matHeaderCellDef>
{{ col?.label }}
</th>
<td mat-cell *matCellDef="let element">
<mat-form-field>
<input [type]="col?.type" matInput [(ngModel)]="element[col.key]" />
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<button mat-button type="button" (click)="increment('ED')">+</button> // **how can i make the parameter dynamic**
<button mat-button>-</button>
</div>

ts文件

export interface SpecimenType {
SE: string;
ED: string;
ES: string;
GL: string;
CI: string;
HE: string;
U: string;
F: string;
BF: string;
SP: string;
CS: string;
T: string;
P: string;
SW: string;
O: string;
}
const COLUMNS_SCHEMA = [
{
key: 'SE',
type: 'number',
label: 'SE'
},
{
key: 'ED',
type: 'number',
label: 'ED'
},
{
key: 'ES',
type: 'number',
label: 'ES'
},
{
key: 'GL',
type: 'number',
label: 'GL'
},
{
key: 'CI',
type: 'number',
label: 'CI'
},
{
key: 'HE',
type: 'number',
label: 'HE'
},
{
key: 'U',
type: 'number',
label: 'U'
},
{
key: 'F',
type: 'number',
label: 'F'
},
{
key: 'BF',
type: 'number',
label: 'BF'
},
{
key: 'SP',
type: 'number',
label: 'SP'
},
{
key: 'CS',
type: 'number',
label: 'CS'
},
{
key: 'T',
type: 'number',
label: 'T'
},
{
key: 'P',
type: 'number',
label: 'P'
},
{
key: 'SW',
type: 'number',
label: 'SW'
},
{
key: 'O',
type: 'number',
label: 'O'
}
];
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
name = 'Angular ' + VERSION.major;
constructor() {}
columnsSchema: any = COLUMNS_SCHEMA;


displayedColumns: string[] = COLUMNS_SCHEMA.map(col => col.key);
dataSource = new MatTableDataSource<any>();
ngOnInit(): void {
this.dataSource.data = [{ SE: 0, ED: 0, ES: 0, GL: 0, CI: 0, HE: 0, U: 0, F: 0, BF: 0, SP: 0, CS: 0, T: 0, P: 0, SW: 0, O: 0 }];
}
click() {
console.log(this.dataSource.data);
}
increment(element: string) {

this.dataSource.data[0][element]++;

console.log(this.dataSource.data);
}
}```

[1]: https://i.stack.imgur.com/aQPE8.png

Answer 1

为每个样本添加一个按钮怎么样？这样，您就不必担心哪个输入具有focus或其他任何内容，每个列都可以单独处理。

<div class="overflow-auto">
<table mat-table [dataSource]="dataSource">
<ng-container [matColumnDef]="col.key" *ngFor="let col of columnsSchema">
<th mat-header-cell *matHeaderCellDef>
{{ col?.label }}
</th>
<td mat-cell *matCellDef="let element; let i = index">
<mat-form-field>
<input [type]="col?.type" matInput [(ngModel)]="element[col.key]" />
</mat-form-field>
<!-- Each cell has it's own + and - buttons -->
<button mat-button type="button" (click)="onAdd(element, col.key)">+</button>
<button mat-button (click)="onSubstract(element, col.key)">-</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>

onSubstract(element: SpecimenType, index: string): void {
element[index] -= 1;
}
onAdd(element: SpecimenType, index: string): void {
element[index] += 1;
}