2017-10-02 1 views
0

*ngFor 항목을 동적으로 생성합니다. 일부 입력이므로 저장 버튼을 구현할 때 입력을 트래버스 할 수있는 방법이 필요합니다. 도움이나 제안이 필요합니다. 나는 동적으로이온을 입력 통과 3

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

enter image description here

답변

1

입력을 작성하는 경우 당신은 Ionic and Forms를 사용하여 쉽게 할 수 있습니다.

2-way data binding 또는 reactive form 방법을 사용하면됩니다. 위 공식 문서를 참조하십시오.

이것은 당신이 사용 사례로 변환 할 수 있습니다 단지 example.Hope입니다 :

양방향 데이터 바인딩 방법 :

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

. t

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

당신은 나를 이해하지 못했습니다. 나는 항목을 동적으로 생성하고, 이것들은 입력과 버튼으로 읽어야하는 입력을 잘 만듭니다. –

+0

예, 위에 표시된대로 모델을 정의한 다음 저장 버튼과 함께 모델을 사용해야합니다. logForm() { console.log (this.todo) }' – Sampath