我有一个在anglarJS上开发的应用程序。当我运行命令时：
npm run build -- -prod
我收到了以下错误
错误在ng：///home/directoryling/appname-play.component.html(173,41）：算术运算的左侧必须是“any”，“number”或枚举类型类型。
引用的HTML代码如下：
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{incomeM}}</span>$</h4>
</div>
第173行是</div>，代码示例中的最后一行。
分配了incomeM的TS代码部分是：
this.incomeM = this.householdControlService.getMonthlyIncome();
和getMonthlyIncome（）是一个返回数字的函数。
我的问题是npm在这里抛出这样的错误是正常的，特别是因为HTML代码中没有算术运算。并且变量incomeM被设置为数字。如果您对我可以做什么或我需要调查什么有任何建议。
注意我尝试从incomeM中删除把手：
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">incomeM</span>$</h4>
</div>
这个想法让我们只打印“incomeM”而不是变量incomeM。但是，我仍然得到相同的错误，除了这次是我在HTML文件中使用的前一个元素。
这是完整的HTML文件供您参考：
import { Component } from '@angular/core';
import { MdDialog } from '@angular/material';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
import { Utilities } from '../utilities';
import { Household, SystemParameters, PowerUsage } from '../../models';
import { AfterSimulationService } from '../services/household/after-simulation.service';
import { HouseholdControlService } from '../services/household/household-control.service';
import { HouseSettingService } from '../services/household/house-setting.service';
import { PaymentService, PaymentType } from '../services/household/payment.service';
import { SimulationControlService } from '../services/household/simulation-control.service';
import { SystemParametersService } from '../services/household/system-parameters.service';
import { AlertDialogComponent } from '../shared/dialog/alert-dialog.component';
import { ConfirmationDialogComponent } from '../shared/dialog/confirmation-dialog.component';
import { PaymentDialogComponent } from '../shared/dialog/payment-dialog.component';
@Component({
selector: 'household-play',
templateUrl: './household-play.component.html',
styleUrls: ['./household-play.component.css']
})
export class HouseholdPlayComponent {
initialTime = 0;
elapsedTime = 0;
currentPower = '0.00';
totalEnergy = '0.00';
cost = '0.00';
maxPower = '0.00';
communityCashBox = '0.00';
happinessScore = 1;
household: Household = new Household();
systemParameters: SystemParameters = new SystemParameters();
readyCount = 0;
//initialize income to -1 for debugging purposes.
incomeM = 0;
totalpaid = 0;
isPrepaid = false;
balance = '0.00';
depositAmount = 0;
sellingMode = false;
roomSetting = [[], [], [], []];
powerUsage: PowerUsage;
constructor(
private afterSimulationService: AfterSimulationService,
private dragulaService: DragulaService,
private householdControlService: HouseholdControlService,
private houseSettingService: HouseSettingService,
private paymentService: PaymentService,
private simulationControlService: SimulationControlService,
private systemParametersService: SystemParametersService,
private dialog: MdDialog
) {
dragulaService.setOptions('room-bag', {
revertOnSpill: true
});
dragulaService.drop.subscribe(value => {
houseSettingService.handleRoomOverflow(this.roomNumberByName(value[2].id), this.roomNumberByName(value[3].id))
});
this.roomSetting = houseSettingService.roomSetting;
householdControlService.observable().subscribe(() => {
this.household = householdControlService.household;
});
//store income value for each houshold.
systemParametersService.observable().subscribe(() => {
this.systemParameters = systemParametersService.systemParameters;
this.initialTime = this.systemParameters.simulationStartTime;
this.incomeM = this.householdControlService.getMonthlyIncome();
console.log(typeof(this.incomeM));
this.communityCashBox = this.systemParameters.communityCashBox.toFixed(2);
});
simulationControlService.observable().subscribe(code => {
this.readyCount = simulationControlService.householdReadyCount;
this.elapsedTime = simulationControlService.currentTime
this.maxPower = simulationControlService.maxPower.toFixed(2);
this.totalEnergy = simulationControlService.totalEnergy.toFixed(2);
if (paymentService.paymentType === PaymentType.FLAT_RATE) {
this.cost = (householdControlService.household.flatRateTariff * Math.ceil(this.elapsedTime / (86400*3))).toFixed(2);
}
else {
this.cost = (simulationControlService.totalEnergy * systemParametersService.systemParameters.tariff).toFixed(2);
}
//this.householdControlService.setTotalCostIncurred(parseInt(this.cost));
this.happinessScore = simulationControlService.happinessScore;
this.powerUsage = simulationControlService.powerUsage;
if (simulationControlService.isGameOver) {
dialog.open(AlertDialogComponent, {
disableClose: true,
data: {
title: 'Game Over',
content: 'Please restart the game.'
}
}).afterClosed().subscribe(result => {
window.location.href = '/';
});
}
this.currentPower = this.simulationControlService.isShutdown? '0.00': houseSettingService.getPower().toFixed(2);
if (code === -1) {
this.openAlertDialog('30 Days Simulation Complete.')
paymentService.repay();
}
});
paymentService.observable().subscribe(bill => {
this.isPrepaid = paymentService.paymentType === PaymentType.PREPAID;
this.balance = (paymentService.balance * (simulationControlService.isSimulating? 1: 10)).toFixed(2);
this.currentPower = this.simulationControlService.isShutdown? '0.00': houseSettingService.getPower().toFixed(2);
if (bill === 0) {
return;
}
this.openPaymentDialog(bill);
})
afterSimulationService.observable().subscribe(message => {
if (message === 0) {
return;
}
this.currentPower = this.houseSettingService.getPower().toFixed(2);
if (message instanceof Array) {
this.openAlertDialog(message[0], true);
}
else {
this.openAlertDialog(message);
}
});
}
deposit(amount: number) {
if (amount < 0) {
return;
}
if (!this.simulationControlService.isSimulating) {
return;
}
this.paymentService.deposit(amount);
}
openPaymentDialog(bill) {
this.dialog.open(PaymentDialogComponent, {
disableClose: true,
data: {
current: bill.current,
remain: bill.remain
}
}).afterClosed().subscribe(amount => {
if (amount > this.householdControlService.household.cashBox) {
this.openPaymentDialog(bill);
this.openAlertDialog('Not enough cash.');
return;
}
if (amount < 0) {
this.openAlertDialog('Invalid amount.');
return;
}
this.paymentService.payHouseholdBill(amount);
this.totalpaid += amount;
});
}
openAlertDialog(message, income=false) {
const dialogRef = this.dialog.open(AlertDialogComponent, {
disableClose: true,
data: {
title: message,
content: ''
}
});
if (!income) {
return;
}
dialogRef.afterClosed().subscribe(() => {
this.householdControlService.receiveMonthlyIncome();
this.openAlertDialog('Income Received.');
});
}
private roomNumberByName(name: string): number {
switch(name) {
case 'room0':
return 0;
case 'room1':
return 1;
case 'room2':
return 2;
case 'room3':
return 3;
default:
return 0;
}
}
applianceOnClick(room, index) {
if (this.sellingMode) {
this.sellAppliance(room, index);
}
else {
this.switchAppliance(room, index);
}
}
switchAppliance(room, index) {
this.roomSetting[room][index].on = !this.roomSetting[room][index].on;
this.houseSettingService.setRoomSetting();
this.currentPower = this.houseSettingService.getPower().toFixed(2);
}
sellAppliance(room, index) {
this.dialog.open(ConfirmationDialogComponent, {
disableClose: true,
data: {
title: 'SELL PRODUCT',
content: `You\'re about to sell this product for $${this.houseSettingService.checkSellPrice(room, index)}, are you sure you want to do this?`,
image: this.roomSetting[room][index].image
}
}).afterClosed().subscribe(result => {
if (result) {
this.houseSettingService.sellAppliance(room, index);
this.currentPower = this.houseSettingService.getPower().toFixed(2);
}
});
}
ready() {
this.householdControlService.ready();
}
}.page {
width: 100vw;
height: 100vh;
background: linear-gradient(180deg, #2E476A, #BFEFFD);
padding: 15px;
min-width: 1024px;
min-height: 768px;
}
.paddingset {
padding: 15px;
}
.household-name {
padding-left: 15px;
color: aliceblue;
margin: 0;
}
/*
.room {
background-image: url(../../assets/images/household-room.svg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
margin: 15px;
}
*/
.sell-switch {
background-color: #005E68;
color: aliceblue;
border-top: 30px solid #005E68;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.room-cell-top-left {
background-image: url(../../assets/images/wood-texture.png);
border-top: 10px solid #005E68;
border-left: 10px solid #005E68;
border-bottom: 5px solid #037E8C;
border-right: 5px solid #037E8C;
}
.room-cell-top-right {
background-image: url(../../assets/images/wood-texture.png);
border-top: 10px solid #005E68;
border-right: 10px solid #005E68;
border-bottom: 5px solid #037E8C;
border-left: 5px solid #005E68;
}
.room-cell-bottom-left {
background-image: url(../../assets/images/wood-texture.png);
border-bottom-left-radius: 30px;
border-top: 5px solid #005E68;
border-right: 5px solid #037E8C;
border-bottom: 10px solid #005E68;
border-left: 10px solid #005E68;
}
.room-cell-bottom-right {
background-image: url(../../assets/images/wood-texture.png);
border-bottom-right-radius: 30px;
border-top: 5px solid #005E68;
border-left: 5px solid #005E68;
border-bottom: 10px solid #005E68;
border-right: 10px solid #005E68;
}
.ready, .power-usage, .overview {
background-color: lightgray;
margin: 15px;
border-radius: 10px;
}
.ready-status {
margin: 0;
}
.ready-btn {
background-color: #037E8C;
color: white;
border-radius: 5px;
}
.value {
width: 100px;
margin: 0px 10px;
font-weight: 700;
}
.section-title {
margin: 0;
margin-left: 5px;
}
.overview .stats {
border: 1px solid white;
border-radius: 5px;
margin: 2px;
}
.system-report-btn {
background-color: #037E8C;
width: 50px;
border-radius: 30px;
margin-top: -10px;
}
.system-report-btn img {
height: 95%;
}
.stats-img {
width: 65%;
max-height: 50px;
}
.ready-status, .overview-title {
margin: 0;
}
.overview-title {
color: dimgray;
}
.deposit-btn {
background-color: firebrick;
color: white;
border-radius: 30px;
width: 50px;
}
.deposit-input {
width: 50px;
}
.deposit-confirm {
background-color: #037E8C;
color: aliceblue;
border: 0px;
}
.sidenav {
width: 100vw;
height: 100vh;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.sidenav-btn {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.sidenav-btn img {
height: 80%;
margin-top: 7px;
}
.sidenav-content {
width: 45%;
padding: 20px;
background-color: lightgray;
}<md-sidenav-container fxFlexFill class="sidenav">
<md-sidenav #sidenav align="end" class="sidenav-content">
<appliance-store></appliance-store>
</md-sidenav>
<div fxLayout="row" fxFlexFill class="page-background">
<div fxLayout="column" fxFlexFill fxFlex="55">
<div fxLayout="row" fxFlex="10" class="paddingset">
<h1 fxFlex="60" class="household-name">{{household.name}}</h1>
<div fxFlex="40" class="sidenav-btn" fxLayoutAlign="end center">
<button md-fab (click)="sidenav.open()">
<img src="../../assets/images/cart-icon.svg">
</button>
</div>
</div>
<div fxLayout="row" fxFlex="25" class="paddingset">
<img fxFlex="95" fxFlexAlign="end" src="../../assets/images/household-house.svg">
<happiness-score fxFlex="5"s [score]="happinessScore"></happiness-score>
</div>
<div fxLayout="column" fxFlexFill fxFlex="65" class="paddingset rooms">
<div fxLayout="row" fxFlex="5" fxLayoutAlign="end end" class="sell-switch">
<div fxFlex="20" fxFlexFill fxLayoutAlign="center end">
<md-slide-toggle labelPosition="before" fxLayoutAlign="end center" class="toggle-switch" color="accent" [(ngModel)]="sellingMode">sell mode</md-slide-toggle>
</div>
</div>
<div fxLayout="row" fxFlex>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-top-left" id="room0" [dragula]='"room-bag"' [dragulaModel]="roomSetting[0]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[0]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(0, i)"></appliance-item>
</div>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-top-right" id="room1" [dragula]='"room-bag"' [dragulaModel]="roomSetting[1]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[1]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(1, i)"></appliance-item>
</div>
</div>
<div fxLayout="row" fxFlex>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-bottom-left" id="room2" [dragula]='"room-bag"' [dragulaModel]="roomSetting[2]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[2]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(2, i)"></appliance-item>
</div>
<div fxLayout="row" fxFlex fxLayoutWrap class="room-cell-bottom-right" id="room3" [dragula]='"room-bag"' [dragulaModel]="roomSetting[3]">
<appliance-item fxFlex=33 *ngFor="let item of roomSetting[3]; let i = index;" [item]="item" [selling]="sellingMode" (click)="applianceOnClick(3, i)"></appliance-item>
</div>
</div>
</div>
</div>
<div fxLayout="column" fxFlexFill fxFlex="45">
<div fxLayout="row" fxFlex="15" class="paddingset ready">
<div fxFlex="25">
<analog-clock [initTime]="initialTime" [elapsedTime]="elapsedTime"></analog-clock>
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="40" fxLayoutAlign="center center">
<h4 class="ready-status"><span class="value">{{readyCount}}</span> of <span class="value">{{systemParameters.numberOfHouseholds}}</span> users <span class="value">is</span> ready</h4>
</div>
<div fxFlex="60" fxLayoutAlign="center end">
<button md-raised-button class="ready-btn" (click)="ready()">I'm Ready!</button>
</div>
</div>
</div>
<div fxFlex class="paddingset power-usage">
<h3 class="section-title">Load Profile</h3>
<combo-chart [powerUsage]="powerUsage" [currentTime]="initialTime+elapsedTime"></combo-chart>
</div>
<div fxLayout="column" fxFlex class="paddingset overview">
<div fxLayout="row" fxFlex="5vh">
<h3 fxFlex="60" class="section-title">Household Overview</h3>
<div fxFlex="40" fxLayoutAlign="end center">
</div>
</div>
<div *ngIf="isPrepaid" fxLayout="row" fxFlex="4vh" class="deposit" fxLayoutAlign="space-between">
<div fxFlexOffset="25" fxFlex="22" fxLayoutAlign="space-between">
<button class="deposit-btn" (click)="deposit(5)">5</button>
<button class="deposit-btn" (click)="deposit(10)">10</button>
</div>
<div fxLayoutAlign="space-around">
<input type="number" class="deposit-input" [(ngModel)]="depositAmount" />
<button class="deposit-confirm" (click)="deposit(depositAmount)">Deposit</button>
</div>
<span class="value" fxFlexAlign="center">$ {{balance}}</span>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cashbox-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Cash Box</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4>$<span class="value">{{household.cashBox.toFixed(2)}}</span></h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/communityfund-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Community fund</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4>$<span class="value">{{communityCashBox}}</span></h4>
</div>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/energyuse-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Energy Use</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{totalEnergy}}</span>kWh</h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cost-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Total Cost</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4>$<span class="value">{{cost}}</span></h4>
</div>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/currentpower-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Current Power</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{currentPower}}</span>kW</h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/maxpower-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Max Power</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{maxPower}}</span>kW</h4>
</div>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="1 1 auto">
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cashbox-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Income</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{incomeM}}</span>$</h4>
</div>
</div>
</div>
<div fxLayout="row" fxFlex="50" class="stats">
<div fxFlex="25" fxLayoutAlign="center center">
<img class="stats-img" src="../../assets/images/cashbox-icon.svg">
</div>
<div fxLayout="column" fxFlex>
<div fxFlex="50" fxLayoutAlign="center center">
<h4 class="overview-title">Outstanding Bill</h4>
</div>
<div fxFlex="50" fxLayoutAlign="center center">
<h4><span class="value">{{(cost-totalpaid).toFixed(2)}}</span>$</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
而是初始化incomeM = 0使其成为收入M：任何;