У меня есть следующий код в моем HTML, я пытаюсь позволить пользователю ввести значение в поле ввода, а затем получить значение в моем файле TS. Однако, когда я набираю одно поле ввода, другие поля ввода ниже также заполняются. Мне нужно только поле ввода, где пользователь вводит для заполнения. Любые мысли
<ng-container matColumnDef="branch_code">
<mat-header-cell *matHeaderCellDef mat-sort-header>Enter Branch Code</mat-header-cell>
<mat-cell *matCellDef="let row">
<input matInput placeholder="Enter Branch Code" [(ngModel)]="branchCode">
<mat-icon (click)="gotoWorkstationDetails()" >arrow_forward</mat-icon>
</mat-cell>
</ng-container>
Я могу получить входное значение в моем файле TS.
Пожалуйста, смотрите скриншот для визуального. Все поля ввода получают «213». Он должен отображаться только в моем активном поле ввода
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
@Component({
selector: 'app-workstation',
templateUrl: './workstation.component.html',
styleUrls: ['./workstation.component.scss']
})
export class WorkstationComponent implements OnInit {
title = 'Workstation';
displayedColumns = ['name', 'mac_address', 'address', 'branch_code'];
dataSource = new MatTableDataSource();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
loading = false;
branchCode;
constructor( private http: HttpClient, public router: Router ) { }
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.loading = true;
this.http.get<Array<any>>('/api/workstations').subscribe(data => {
this.dataSource.data = data;
this.loading = false;
},
err => {
this.loading = false;
});
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
gotoWorkstationDetails() {
console.log(this.branchCode);
this.loading = true;
this.http.get<Array<any>>(`/api/branches/${this.branchCode}/workstations`).subscribe(data => {
const branchDetail = data;
this.router.navigate(['workstation/' + this.branchCode]);
console.log(branchDetail);
this.loading = false;
},
err => {
this.loading = false;
});
}
}