乘以模型和輸入值

我有相當簡單的任務。我有 2 張帶有價格和用戶票的模型票，其中用戶輸入數量，然后在另一個名為“已付”的欄位中，我想將票模型中的數量欄位和價格的值相乘。這是我到目前為止嘗試過的并獲得了未定義的屬性值。我的組件是：

import { Component, OnInit } from '@angular/core';
import { EventService } from 'src/app/services/event.service';
import { Event } from 'src/app/models/event.model';
import {TicketService} from 'src/app/services/ticket.service';
import {Ticket} from "../../models/ticket.model";
import {Userticket} from "../../models/userticket.model";
import {UserticketService} from "../../services/userticket.service";
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: 'app-userticket-buy',
  templateUrl: './userticket-buy.component.html',
  styleUrls: ['./userticket-buy.component.css']
})
export class UserticketBuyComponent implements OnInit {
  currentTicket: Ticket = {
    price: 0,
    eventid:this.retrieveEvents()



  };
  eventid = this.currentTicket.eventid;

  events?: Event[];
  submitted = false;

  currentUserTicket: Userticket = {
    qty: 1,
    paid:0,



  };
  //final current

  //end
  message = ''

  constructor(
    private eventService: EventService,
    private ticketService:TicketService,
    private userticketService:UserticketService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit(): void {
    this.message = '';
    this.getTicket(this.route.snapshot.params.id);

  }
  getTicket(id: string): void {
    this.ticketService.get(id)
      .subscribe(
        data => {
          this.currentTicket = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }
  //save order
  saveOrder(): void {
    const data = {
      qty: this.currentUserTicket.qty,
      paid: this.currentUserTicket.paid,

      ticketid: this.currentTicket.id

    };
    //console.log(data.eventid);
    this.ticketService.create(data)
      .subscribe(
        response => {
          console.log("city")
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }
  //end

  retrieveEvents(): any {
    this.eventService.getAll()
      .subscribe(
        data => {
          this.events = data;
          console.log(data);
          return data;
        },
        error => {
          console.log(error);
          return error;
        });

  }
}

這是模板：

<div>
  <div *ngIf="currentTicket.id" class="edit-form">
    <h4>Билет</h4>
    <form>
      <div class="form-group">
        <label for="title">Количество</label>
        <input
          type="number"
          class="form-control"
          id="title"
          [(ngModel)]="currentUserTicket.qty"
          name="qty"
        />

        <input
          type="hidden"
          class="form-control"
          id="id"
          [(ngModel)]="currentUserTicket.ticketid"
         value="{{currentTicket.id}}"
          name="ticketid"
        />
      </div>

      <div class="form-group">
        <label for="title">Количество</label>
        <input
          type="number"
          class="form-control"
          id="paid"
          [(ngModel)]="currentUserTicket.paid"
          value="{{currentUserTicket.qty*currentTicket.price}}"
          name="paid"
        />


      </div>

      <div class="form-group">

        <p>Событие: {{currentTicket.eventid?.name}}</p>
        <p>Зал: {{currentTicket.eventid?.hallid?.name}}</p>
        <p>Город: {{currentTicket.eventid?.cityid?.name}}</p>





      </div>

    </form>



    <button
      type="submit"
      class="badge badge-success mb-2"
      (click)="saveOrder()"
    >
      Подтвердить
    </button>
    <p>{{ message }}</p>
  </div>

  <div *ngIf="!currentTicket.id">
    <br />
    <p>Нет доступа...</p>
  </div>
</div>

如何正確地做到這一點？我嘗試按照建議在 keyup 上使用事件。得到同樣的錯誤，但在那個事件上。

calculatePrice($event:any){
    this.currentUserTicket.paid= this.currentTicket.price * this.currentUserTicket.qty
  }

uj5u.com熱心網友回復：

在您的模板中：

 <input type="number"
          class="form-control"
          id="title"
          [(ngModel)]="currentUserTicket.qty"
          name="qty"
          (keyup)="calculatePrice($event)"
        />

  <input
          type="number"
          class="form-control"
          id="paid"
          [(ngModel)]="currentUserTicket.paid"
          name="paid"
        />

并且，在您的 ts 檔案中，添加函式：

calculatePrice($event){
  this.currentUserTicket.paid= this.currentUserTicket.qty*this.currentTicket.price
}

標籤：有角的 打字稿 角12

上一篇：在同一個函式中等待訂閱

下一篇：Angular-錯誤的包版本？