如何将选定的 HTML 表格行值显示到输入文本中？答案

【问题标题】：How To Display Selected HTML Table Row Values Into Input Text?如何将选定的 HTML 表格行值显示到输入文本中？
【发布时间】：2018-04-01 15:59:55
【问题描述】：

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

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

【问题讨论】：

标签： html angular tablerow

【解决方案1】：

参考以下高级实现

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

【讨论】：

【解决方案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>

【讨论】：