从输入中获取值并将其放入 *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 的模板内的输入 total 的值，但是将包含的输入该值将在 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>

我不t 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 ....>

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

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

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

之上

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

Getting value from a input and put it in another input outside *ngFor

input

ngfor

angular