使用Angular材质在Angular中的唯一输入值

Question

I have the following code in my html, I am trying to let a user input a value in the input field and then get the value in my ts file. However when I type in one input field, the other input fields below also get populated. I need only the input field where the user is typing in to get populated. Any thoughts

  <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>

I can get the input value successfully in my ts file.

Please see screenshot for visual. All input fields are getting '213'. It must only display in my active input field

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;
      });
  }



}

Answer 1

Input in data table

Create one more data column like branchCode in table :

<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)]="row.branchCode">
        <mat-icon (click)="gotoWorkstationDetails()">arrow_forward</mat-icon>
    </mat-cell>
</ng-container>

Here you are referencing branchCode to all input.