web-dev-qa-db-ja.com

コンポーネント内でionic 2以内に入力値を取得するにはどうすればよいですか？

ionic 2を使用してショッピングアプリを作成します。製品の詳細では、数量の増分値と減分値のステッパーを作成しました。

私の質問：コンポーネントのionic 2内の入力値を取得する方法？

inputcomponentsionic2
6
mahmoudismail

解決策：

1-​​= app/pages/index.html

Angular 2）では、テンプレートでngModelを使用する必要があります。

<ion-header>
  <ion-navbar primary>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item>
    <button lightgray full (click)="incrementQty()">+</button>
    <ion-item>
      <ion-input type="number" min="1" [value]="qty" [(ngModel)]="qty"></ion-input>
    </ion-item>
    <button lightgray full (click)="decrementQty()">-</button>
  </ion-item>
</ion-content>

2-app/pages/index.ts

import { Component} from '@angular/core';
import { NavController, Slides} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/titlepage/titlepage.html',
})
export class titlePage {
  qty:any;
  constructor(private nav: NavController) {
    this.qty = 1;
  }

  // increment product qty
  incrementQty() {
    console.log(this.qty+1);
    this.qty += 1;
  }

  // decrement product qty
  decrementQty() {
    if(this.qty-1 < 1 ){
      this.qty = 1
      console.log('1->'+this.qty);
    }else{
      this.qty -= 1;
      console.log('2->'+this.qty);
    }
  }
}
19
mahmoudismail

または、代替ソリューションとして、angular 2）向けに設計された、より適切なFormコントロールを使用できます。（ 詳細はこちら ）

例：

TypeScript

import {Component, Input} from '@angular/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl} from '@angular/common';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
    selector: 'chat-form',
    templateUrl: '/client/components/chat-form/chat-form.html',
    directives: [IONIC_DIRECTIVES, FORM_DIRECTIVES],
    pipes: [],
    styleUrls: []
})
export class ChatFormComponent {

    chatForm:ControlGroup;

    messageInput:AbstractControl;

    constructor(private translate:TranslateService, private formBuilder:FormBuilder) {
        this.chatForm = formBuilder.group({messageInput: ['']})
        this.messageInput = this.chatForm.controls['messageInput'];
    }

    sendMessage() {
        console.log('sendMessage: ', this.messageInput.value);
    }
}

テンプレート

<form [ngFormModel]="chatForm" (ngSubmit)="sendMessage()">
    <ion-input type="text" [ngFormControl]="messageInput" placeholder="{{'chat.form.placeholder' | translate }}"></ion-input>
    <button fab>
        <ion-icon name="send"></ion-icon>
    </button>
</form>
5
Matyas