遍历 ionic 3 中的输入答案

【问题标题】：traverse the inputs in ionic 3遍历 ionic 3 中的输入
【发布时间】：2017-10-02 17:06:41
【问题描述】：

在我的*ngFor 中，我动态创建项目，其中包括一些输入，很好，我需要的是如何遍历这些输入当我实现我的保存按钮时。我需要帮助或一些建议。如果我动态创建输入

<ion-list item-start *ngFor="let nivel of niveles" id="asistencia">
                <ion-item>
                    <ion-label color="primary" class="niveles">{{nivel.nivel}}</ion-label>
                    <ion-label color="danger" class="niveles">{{nivel.codigoModular}}</ion-label>
                </ion-item>
                <ion-item>
                    <ion-label>Docentes que deben Asistir</ion-label>
                </ion-item>
                <ion-item>
                    <ion-label>
                        <ion-icon color="primary" name="school"></ion-icon>
                    </ion-label>
                    <ion-input type="number">
                    </ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Docentes que Asistierón</ion-label>
                </ion-item>
                <ion-item>
                    <ion-label>
                        <ion-icon color="primary" name="school"></ion-icon>
                    </ion-label>
                    <ion-input type="number">
                    </ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Alumnos que deben Asistir</ion-label>
                </ion-item>
                <ion-item>
                    <ion-label>
                        <ion-icon color="danger" name="contacts"></ion-icon>
                    </ion-label>
                    <ion-input type="number">
                    </ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Alumnos que Asistierón</ion-label>
                </ion-item>
                <ion-item>
                    <ion-label>
                        <ion-icon color="danger" name="contacts"></ion-icon>
                    </ion-label>
                    <ion-input type="number">
                    </ion-input>
                </ion-item>
            </ion-list>

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

您可以使用Ionic and Forms 轻松完成。

您可以使用2-way data binding 或reactive form 方法。请参考上面的官方文档。

这只是一个示例。希望您可以将其转换为您的用例：

2路数据绑定方式：

.html

 <form (ngSubmit)="logForm()">
      <ion-item>
        <ion-label>Todo</ion-label>
        <ion-input type="text" [(ngModel)]="todo.title" name="title"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Description</ion-label>
        <ion-textarea [(ngModel)]="todo.description" name="description"></ion-textarea>
      </ion-item>
      <button ion-button type="submit" block>Add Todo</button>
    </form>

.ts

export class FormsPage {
  todo = {}
  logForm() {
    console.log(this.todo)
  }
}

【讨论】：

你不明白我的意思，我是动态生成项目的，而且这些输入很好，我必须用按钮阅读这些输入
是的，您需要如上所示定义您的模型，然后使用该模型与保存按钮logForm() { console.log(this.todo) }

【解决方案2】：

我不确定这是否会有所帮助，但我已经分叉了由 ConnorsFan 创建的 Stackblitz 来解决我遇到的动态表单问题。 staffFormInfo 中的表单模板驱动表单。动态形式stackblitz可以找到here

ConnorsFan 的原帖可以在here找到。

如果这有帮助，请告诉我...

【讨论】：