乘以模型和输入值

Question

我的任务很简单。我有 2 个带有价格和 userticket 的模型票，用户在其中输入数量，然后在另一个名为 paid 的字段中，我想将 qty 字段的值和票模型中的价格相乘。这是我到目前为止所做的尝试并得到属性未定义的值。我的组件是：

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
  }

Answer 1

在您的模板中：

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

乘以模型和输入值

multiply model and input value

typescript

angular

angular12