Question

我使用动态输入的ngModel遇到一些问题。

当我在输入中插入数字时，不允许我插入新的数字，而是将焦点集中在...上，并且在我插入该输入时无法计算数据。我必须一张一张地插入来计算总金额。

我尝试过分别使用两种方式进行数据绑定，但是它也不起作用。

这是我构建动态输入的地方：

`

<div class="cake-item col-md-12" *ngFor="let ing of cake.ingredients;let i = index">
    <input type="text" 
           class="form-control" 
           [(ngModel)]="cake.ingredients[i]" 
           (input)="this.calculate()">
 </div>

`

这是模型：

export class Cake {
id;
title: string;
size: string;
rations: number;
weight: number;
portion: number;
ingredients: number[];
ingredientsTotal: number;
cremaIngredients: number[];
decor: number[];
expenses: number;
workforce: number;
benefits: number;

constructor(title, size, rations, weight, portion, ingredients, cremaIngredients, decor, workforce) {
    this.title = title;
    this.size = size;
    this.rations = rations;
    this.weight = weight;
    this.portion = portion;
    this.ingredients = ingredients;
    this.cremaIngredients = cremaIngredients;
    this.decor = decor;
    this.workforce = workforce;
}

public costOf(cakePart){
    let sum = 0;
    this[cakePart].forEach(function(item, index){
        sum += +item;
    });
    this[cakePart+'Total'] = sum;
}

}

import { Component, OnInit } from '@angular/core';
import { Cake } from '../../models/cake';

@Component({
    selector: 'app-cakes',
    templateUrl: './cakes.component.html',
    styleUrls: ['./cakes.component.css']
})
export class CakesComponent implements OnInit {

public cakes: Cake[];

constructor() {
this.cakes=[
  new Cake('5"/13cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('6"/15cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('7"/18cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('8"/20cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('9"/23cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('10"/25.5cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('11"/28cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
  new Cake('12"/30cm', '5', 6, 200, 1, [10, 14, 18], [10, 14, 18], [10, 14, 18], 7),
];

let tableTitles = {
  'default': [
    'Tamaño', 
    'Raciones', 
    'Peso Aprox', 
    'Porcion', 
    'Precio Total',
    'Gastos 10%',
    'Mano de obra min 6$/h',
    'Beneficios +30%'
  ],
  'dynamic': [
    'Ingredientes Tarta',
    'Ingredientes Crema',
    'Decoración'
  ]
  }
  }

  ngOnInit() {
  }

  calculate(){
     for(let i=0; i<this.cakes.length; i++){
        this.cakes[i].costOf('ingredients');
  }
  console.log(this.cakes);
  }

}

它正在工作，但实际上不是我的习惯

角双向数据绑定输入问题

0 个答案: