如何将选定的 HTML Table 行值显示到输入文本中？

Question

我有一个名为 Equipment 的 table，我想将行显示到另一个组件的输入文本中，任何想法请或示例。这是我的 table 模特

export class store{
    id: number;
    park_id:string;
    BonMvt:Array<string>;
    SN: string;
    reference:string;
    ModelType: string;
    State: string;
    isActived: string;
}

Answer 1

参考以下高级实现

StackBlitz URL：https://stackblitz.com/edit/angular-ylp9z4

Answer 2

TableWithInputComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-with-input',
  templateUrl: './table-with-input.component.html',
  styleUrls: ['./table-with-input.component.css']
})

export class TableWithInputComponent implements OnInit {

  stores : store [] = [];
  constructor() { }

  ngOnInit() {
for (let i=0; i<10; i++) {
  this.stores.push(new store(i));
}
  }
  submit() {
    console.log(this.stores)
  }
}

export class store{
  id: number;
  park_id:string;
  SN: string;
  reference:string;
  ModelType: string;
  State: string;
  isActived: string;
  constructor(i: any) {
    this.id = i;
    this.park_id = 'park_id'+i;
    this.SN = 'SN'+i;
    this.reference = 'reference'+i;
    this.ModelType = 'ModelType'+i;
    this.State = 'State'+i;
    this.isActived = 'isActived'+i;
  }
}

table-with-input.component.html

<table >
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let st of stores">
      <td><input  [(ngModel)]="st.id"/></td>
      <td><input  [(ngModel)]="st.park_id"/></td>
      <td><input  [(ngModel)]="st.SN"/></td>
      <td><input  [(ngModel)]="st.reference"/></td>
      <td><input  [(ngModel)]="st.ModelType"/></td>
      <td><input  [(ngModel)]="st.State"/></td>
      <td><input  [(ngModel)]="st.isActived"/></td>
    </tr>
  </tbody>
</table>

<button (click)="submit()"> submit </button>

如何将选定的 HTML Table 行值显示到输入文本中？

How To Display Selected HTML Table Row Values Into Input Text?

html

angular

tablerow