如何使用 Angular 从 HTML 中检索特定值答案

【问题标题】：How to Retrieve Specific Value from HTML using Angular如何使用 Angular 从 HTML 中检索特定值
【发布时间】：2019-12-31 09:35:07
【问题描述】：

目标：
从位于语法代码“Tr”中的 id 中检索值，并从文本框名称“databox”中的值中检索。

当您按下“检索”按钮时，将执行检索这两个值的过程。

问题：
当您按下“检索数据”按钮时，我应该如何从 html 页面中检索这两个值。

我应该采用什么方法？

我也不知道如何检索语法代码“tr”中的 id。

Stackblitz:
https://stackblitz.com/edit/angular-274dah

谢谢！

【问题讨论】：

标签： html angular visual-studio-code

【解决方案1】：

您可以将 item 对象和输入 ref 传递给提交函数，如下所示：

    <tr id="{{ item.id }}" *ngFor="let item of datadata">
      <td>{{ item.login }}</td>
      <td>{{ item.node_id }}</td>
      <td>{{ item.url }}</td>
      <td>
        <input id="box_ + {{ item.id }}" type="text" name="databox" #databoxInput><br>
        <button (click)="submit(item, databoxInput)">Retrieve data</button>
      </td>
    </tr>

您可以按如下方式访问组件中的值：

  submit(clickedItem, inputref) {
    console.log('clickedItem:', clickedItem, ' inputValue:', inputref.value)
  }

所以你会得到被点击的项目对象（包含被点击行的全部数据）和它在提交函数中对应的输入值。

【讨论】：

【解决方案2】：

使用 ngModel 作为解决方案。

在组件中添加一个全局变量作为对象，并在输入中添加使用该变量作为 ngModel，并将“id”作为该变量的键。同样通过按钮点击传递id，所以每当按钮点击时，我们可以根据id轻松获取输入框值。

HTML：-

<tr id="{{ item.id }}" *ngFor="let item of datadata">
  <td>{{ item.login }}</td>
  <td>{{ item.node_id }}</td>
  <td>{{ item.url }}</td>
  <td>
    <input id="box_ + {{ item.id }}" type="text" name="databox" [(ngModel)]="testModel[item.id]"><br>
    <button (click)="submit(item.id)">Retrieve data</button>
  </td>
</tr>

组件：-

export class AppComponent  {
  name = 'Angular';

  testModel = {};
  private datadata: any;

  constructor(private dataService: DataService) {
    dataService.getData2().subscribe((data: any) => { 
      this.datadata = data;          
    });
  }    
  submit(id: any) {
    alert(this.testModel[id]);
  }    
}

【讨论】：

【解决方案3】：

您可以通过修改 submit 函数以包含一个参数来立即获取它们：(submit(item))。

关于功能：

submit(item) {
    const input = <HTMLInputElement>(
      document.getElementById(`box_ + ${item.id}`)
    ); // circumvent The property 'value' does not exist on value of type 'HTMLElement' see https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement for more detail
    console.log(item.id, input.value);
}

https://stackblitz.com/edit/angular-8ifjwf?file=src/app/app.component.html

_{注意：你可以在console.log看到id和输入数据。随意重用该值。}

【讨论】：