Angular 2.0はコールバックとロジックの問題を解決します

Question

私はAngularの新機能です。フォーム入力の値が変更されたときに価格を更新する簡単なスクリプトを作成するのは間違いありません。 Angularをクラス駆動型およびディレクティブ駆動型モデルで使用するには、いくつかの異なる方法があるようです。主要なウェブサイトの文書を読んでください。運はありません。

import { Component } from '@angular/core'; 
export class Ticket { 
    ticketNumber: number; 
    name: string; 
    price: number; 
} 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <form name="myForm"> 
    <div class="ticket box_shadows"> 
     <div class="ticket_title">{{ticket.name}}</div> 
     <input type="number" name="myInput" class="ticket_ammount" min="1" max="10" value="{{ticket.ticketNumber}}"required ng-class="updatePrice(price,ticketNumber)"> 
     <div class="ticket_details"><input class="ticket_details_input" type="text" placeholder="Name:" required></div> 
     <div class="ticket_details"><input class="ticket_details_input" type="email" placeholder="your@email.com" required></div> 
     <div class="ticket_details"><input class="ticket_details_input" type="text" placeholder="+852" required></div> 
     <div class="ticket_price">$ <input type="number" name="price" value="{{ticket.price}}|> 
     <button type="button" class="ticket_button">Book</button> 
     </div> 
    </div> 
    </form> 
    ` 
}) 
//creates the class 
export class AppComponent { 
    ticket: Ticket = { 
    ticketNumber: 1, 
    name: 'Ticket', 
    price: 300 
    }; 
    //updates the price on a new click 
    updatePrice(value, ticketN){ 
     value = value * ticketN; 
     return value; 
     // this then needs to be passed back to the price input field. 
    } 
} 

----- UPDATE ------- はそう私は2つのクラスのを呼び出すことで問題を抱えて、それらが相互作用するためにしようとしていました。私はコードをストライプ化し、これを再び動作させるためには、これを動作させるために入れています。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form> 
    <div class="ticket box_shadows"> 
     <div class="ticket_top"> 
      <div class="ticket_title">{{title}}</div> 
      <input type="number" name="myInput" class="ticket_ammount" min="1" max="10" [(ngModel)]="ticket" (click)="updatePrice()" required> 
     </div> 
     <div class="ticket_btm"> 
      <div class="ticket_price"><span>$</span><input type="number" [(ngModel)]="totalPrice" class="ticket_price_number" disabled></div> 
      <div class="ticket_btm_spacer"></div> 
      <button type="button" class="ticket_button">Book</button> 
     </div> 
    </div> 
    </form> 
    ` 
}) 
export class AppComponent { 
    ticket: number = 1; 
    title: string = "Ticket"; 
    price: number = 300; 
    totalPrice: number = 300; 
    updatePrice(){ 
    this.totalPrice = this.price * this.ticket; 
    if(this.ticket >= 2){ 
     this.title = "Tickets"; 
    } 
    else{ this.title = "Ticket";} 
    } 
} 

Answer 1

双方向バインド値を入力するには、ユーザngModelが必要です。

<input [(ngModel)]="ticket.price">