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

Question

早上好。如何从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的模板内部的输入总值，但是包含该值的输入将在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>

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

我dont know how to get the value and put it in a input within thengFor`。

最好的祝福。

Answer 1

您可以连接两个输入字段以使用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>

Answer 2

我相信你可以使用@ViewChildren来做这类事情。

<input #inputs ....>

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

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

Josh Morony给了一个覆盖Angular这部分的Ionic tutorial。这个想法是一样的 - Ionic建立在Angular上......