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

-----更新-------所以我在調用兩個類並嘗試使它們交互時遇到問題。 我剝離了代碼，然后再次開始，這就是我投入的工作。

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