Typescript代码:如何计算Totale=Sum(子句)和价格* quantita =子句Angular5

在Angular 5中使用TypeScript计算总价（Totale）和每个项目的价格乘以数量（price * quantity），你可以按照以下步骤进行：

1. 定义模型

首先，定义一个模型来表示你的商品项。

export interface Item {
  price: number;
  quantity: number;
}

2. 创建组件和服务

创建一个组件来展示商品列表和处理计算逻辑。

import { Component } from '@angular/core';
import { Item } from './item.model';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css']
})
export class ShoppingCartComponent {
  items: Item[] = [
    { price: 10, quantity: 2 },
    { price: 20, quantity: 1 },
    // 更多商品...
  ];

  get total(): number {
    return this.items.reduce((acc, item) => acc + (item.price * item.quantity), 0);
  }
}

3. 在模板中展示

在组件的模板中，你可以使用Angular的数据绑定来展示每个商品的总价和购物车的总金额。

<!-- shopping-cart.component.html -->
<ul>
  <li *ngFor="let item of items">
    {{ item.price }} x {{ item.quantity }} = {{ item.price * item.quantity }}
  </li>
</ul>
<p>Total: {{ total }}</p>

4. 服务（可选）

如果你想要将计算逻辑移到服务中，可以创建一个服务来处理这些计算。

import { Injectable } from '@angular/core';
import { Item } from './item.model';

@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService {
  calculateTotal(items: Item[]): number {
    return items.reduce((acc, item) => acc + (item.price * item.quantity), 0);
  }
}

然后在组件中注入这个服务并使用它。

import { Component } from '@angular/core';
import { Item } from './item.model';
import { ShoppingCartService } from './shopping-cart.service';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.css']
})
export class ShoppingCartComponent {
  items: Item[] = [
    { price: 10, quantity: 2 },
    { price: 20, quantity: 1 },
    // 更多商品...
  ];

  constructor(private shoppingCartService: ShoppingCartService) {}

  get total(): number {
    return this.shoppingCartService.calculateTotal(this.items);
  }
}

这样，你就有了一个清晰的分离，组件负责展示，服务负责业务逻辑。

确保在你的模块中声明了ShoppingCartComponent，并且在需要的地方导入了ShoppingCartService。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ShoppingCartComponent } from './shopping-cart.component';
import { ShoppingCartService } from './shopping-cart.service';

@NgModule({
  declarations: [
    ShoppingCartComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ShoppingCartService],
  bootstrap: [ShoppingCartComponent]
})
export class AppModule { }

这样，你就完成了在Angular 5中使用TypeScript计算总价和每个项目的价格乘以数量的功能。