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 the ngFor`。

最好的问候。

Answer 1

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

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

在包含* ngFor

的组件后面的类中

    try{
           ArrayList<ContentProviderOperation> ops = new ArrayList<android.content.ContentProviderOperation>();

            if(!name.equals("")) {
                ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
                        .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
                        .withValue(ContactsContract.Data.MIMETYPE, ContactsContract.CommonDataKinds.StructuredName.CONTENT_ITEM_TYPE)
                        .withValue(ContactsContract.CommonDataKinds.StructuredName.DISPLAY_NAME, name)
                        .build());
            }

            if(!number.equals("")){
                ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
                        .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
                        .withValue(ContactsContract.Data.MIMETYPE,ContactsContract.CommonDataKinds.Phone.CONTENT_ITEM_TYPE)
                        .withValue(ContactsContract.CommonDataKinds.Phone.NUMBER, number)
                        .withValue(ContactsContract.CommonDataKinds.Phone.TYPE,ContactsContract.CommonDataKinds.Phone.TYPE_MOBILE)
                        .build());
            }

            if(!email.equals("")){
                ops.add(ContentProviderOperation.newInsert(ContactsContract.Data.CONTENT_URI)
                        .withValueBackReference(ContactsContract.Data.RAW_CONTACT_ID, 0)
                        .withValue(ContactsContract.Data.MIMETYPE,ContactsContract.CommonDataKinds.Email.CONTENT_ITEM_TYPE)
                        .withValue(ContactsContract.CommonDataKinds.Email.DATA, email)
                        .withValue(ContactsContract.CommonDataKinds.Email.TYPE, ContactsContract.CommonDataKinds.Email.TYPE_WORK)
                        .build());
            }

            context.getContentResolver().applyBatch(ContactsContract.AUTHORITY, ops);
        }
    } catch (Exception e) {
        Toast.makeText(context,e.toString(),Toast.LENGTH_SHORT).show();
    }

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

Answer 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>

从输入中获取价值并将其放在* ng

2 个答案: