Умножьте данное число на номер ввода

Question

Он предназначен для умножения 1 на 5, как вы можете видеть, но я не знаю как, я пробовал что-то с ngModel, но это не сработало.

Это код в HTML-коде ввода и общая стоимость:

<input type="number" style="width:40px; float:right;" />
<br>
<hr>
<p style="float: left;">Total price:</p>
<p style="float: right;"> <b>€{{activeProduct.price * inputNum}}</b>,-</p>

Это модель, которую я сделал для продукта:

Это код в моем файле TypeScript:

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/models/product';

@Component({
  selector: 'app-tool-card',
  templateUrl: './tool-card.component.html',
  styleUrls: ['./tool-card.component.css']
})
export class ToolCardComponent implements OnInit {
  public activeProduct: any;
  public inputNum: number;

  products: Product[] = [
    new Product('Hammer', 'Hammer', 'Item used to hammer things', 'https://upload.wikimedia.org/wikipedia/commons/8/84/Claw-hammer.jpg', 1),
    new Product('Saw', 'Hammer', 'I just saw a guy saying the n-word', 'https://media.screwfix.com/is/image//ae235?src=ae235/32045_P&$prodImageMedium$', 2),
    new Product('Hit or miss', 'Hit or miss', 'I guess they never miss huh, mwah', 'https://pbs.twimg.com/media/Ds5mk0RU0AA1z_l.jpg', 5)
  ];

  constructor() {
  }

  ngOnInit() {
  }

  public calculateTotal() {
    this.activeProduct.price * this.inputNum;
  }

  public openModal(product): void {
    // Copying object reference so we don't modify the original
    this.activeProduct = Object.assign({}, product);
    this.inputNum = 0;
  }
}

Answer 1

Вы ни к чему не привязали поле ввода, используйте ngModel

<input type="number" [(ngModel)]="inputNum" style="width:40px; float:right;" />

или если вы не хотите использовать модуль форм

<input type="number" (change)="inputNum = $event.target.value" style="width:40px; float:right;" />

Answer 2

1. Убедитесь, что вы добавили FormsModule в свой массив импорта в app.module.ts файле

app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [...],
  imports: [
    ...
    FormsModule
  ],
  ...etc
})

2. HTML-файл

<div>
   <p>{{ activeProduct.price }} </p>
   <label for="amount">Amount</label>
   <input type="number" (change)="calculateTotal() [(ngModel)]="activeProduct.numOfItems"/>
   <br>
   <hr>
   <p style="float: left;">Total price:</p>
   <p [(ngModel)]="totalCost">{{ totalCost }}</p>
</div>

3. файл TS

export class AppComponent {
    activeProduct: any = {
        price: 12,
        name: 'pizza',
        numOfItems: 0
    };

    totalCost: number = 0;

    constructor() {}

    calculateTotal(): number {
        return this.totalCost = this.activeProduct.numOfItems * this.activeProduct.price;
    }
}

не самый элегантный способ, но он доставит вас туда. Я думаю, что самая большая проблема - FormsModule