Angular 中使用 Angular Material 的唯一输入值

Question

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



}

Answer 1

Input in data table

在表中再创建一个数据列，如branchCode：

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

在这里，您将 branchCode 引用到所有输入。