从输入中获取值并将其放入 *ngFor 之外的另一个输入中答案

【问题标题】：Getting value from a input and put it in another input outside *ngFor从输入中获取值并将其放入 *ngFor 之外的另一个输入中
【发布时间】：2017-07-17 14:56:31
【问题描述】：

早上好。如何从ngFor 中的输入中获取值？例如，我有以下代码：

<table>
    <thead>
        <tr>
            <th>
                <!--th>title here<th-->
            </th>
        </tr>
    </thead>
    <tbody>
        <ng-template ngFor let-item [ngForOf]="data" let-i="index">
            <tr>
                <td>
                    {{ item.info[i].dataItem }}
                </td>
            </tr>
            <input type="text" name="total" id="total" value="{{ item.value }}">
        </ng-template>
    </tbody>
</table>

从前面的代码中，我需要获取包含ngFor 的模板内的输入total 的值，但包含此值的输入将在@ 之外987654324@.

完整代码如下：

<table>
    <thead>
        <tr>
            <th>
                <!--th>title here<th-->
            </th>
        </tr>
    </thead>
    <tbody>
        <ng-template ngFor let-item [ngForOf]="data" let-i="index">
            <tr>
                <td>
                    {{ item.info[i].dataItem }}
                </td>
            </tr>
            <input type="text" name="total" id="total" value="{{ item.value }}">
        </ng-template>
    </tbody>
</table>

<div>
    <input type="text" name="totalT" id="totalT" value="The_value_of_this_input_must_be_the_same_that_input_with_total_id">
</div>

我不知道t know how to get the value and put it in a input within thengFor`。

最好的问候。

【问题讨论】：

您正在尝试将 n 连接到 1。在 ngFor 中您有更多输入字段，您希望底部的输入中的哪一个具有值？
好吧，在您回答问题之前，似乎有些不对劲。总计的 id - 在一个循环中。 id 在整个网页中应该是唯一的...
我需要当用户点击 tr 时，将包含它的值传递给下面的输入。是每次用户选择一个 tr。

标签： angular input ngfor

【解决方案1】：

我相信您可以将@ViewChildren 用于此类事情。

<input #inputs ....>

在包含 *ngFor 的组件后面的类中

import {ViewChildren} from 'angular2/core'
export class myComponent {
 ...
@ViewChildren('inputs') inputs;
constructor(...) {}
}

Josh Morony 提供了一个 Ionic tutorial，涵盖了 Angular 的这一部分。想法是一样的——Ionic 建立在 Angular 之上...

【讨论】：

【解决方案2】：

您可以使用ngModel 连接两个输入字段以具有相同的值。如果你这样做：

<input [(ngModel)]="someVar" type="text" id="text1">

<input [(ngModel)]="someVar" type="text" id="text2">

无论你在第一个input 中写什么，第二个input 都会得到那个值。

在你的情况下试试这个：

<table>
  <thead>
    <tr><th><!--th>title here<th--></th></tr>
  </thead>
  <tbody>             
    <ng-template ngFor let-item [ngForOf]="data" let-i="index" >                    
      <tr>
        <td>{{item.info[i].dataItem}}</td>
      </tr>
      <input [(ngModel)]="someVar" type="text" name="total" id="total" value="{{ item.value }}"> 
    </ng-template>
  </tbody>
</table>

<div>
  <input [(ngModel)]="someVar" type="text" name="totalT" id="totalT">
</div>

【讨论】：

使用此代码，如何从第二个输入中获取值并将其与 ngIf 进行比较？
您有来自someVar 中第二个输入的值。像这样在组件中定义它@Input() someVar;