如何在Angular 6打字稿中的對象數組中訪問單個屬性？

Question

我目前正在制作預算應用。 我可以通過價格屬性添加一系列費用。 它是由expense.model.ts構建的。 我正在嘗試訪問Typescript中的price屬性。 我已經可以使用ngFor循環在HTML上訪問它了。 有沒有一種方法可以在TypeScript中使用for循環來實現？

expenses.service.ts

import { Injectable } from '@angular/core';
import { Expense } from '../expenses-list/expense/expense.model';
@Injectable({
  providedIn: 'root'
})
export class ExpensesService {
  expenses: Expense [] = [
    new Expense('car payment', 350) // price
];
constructor() { }
onAddExpenseToExpenses(expense: Expense) {
  this.expenses.push(expense);
}

// EXAMPLE //
onCalculate() {
  // get prices from listed items
  // add all the prices
  // subtract income from sum of prices
}

對不起，如果我不清楚。 我剛開始使用Angular 6。

謝謝你的幫助！ =）

這是我的費用模式

export class Expense {
  private item: string;
  private price: number;

constructor(item: string, price: number) {
    this.item = item;
    this.price = price;
  }
}

Answer 1

沒有類型和接口，TypeScript和JavaScript幾乎相同。 您應該學習和參考JS文檔

處理循環有很多方法：

對於：

  let sumPrices = 0;
  for (let i = 0; i < this.expenses; i++) {
    sumPrices += this.expenses[i].price;
  }

對於...的...

  let sumPrices = 0;
  for (const o of this.expenses) {
    sumPrices += o.price;
  }

數組圖：

  // get prices from listed items
  // add all the prices
  const sumPrices = this.expenses.reduce((acc, o) => acc + o.price, 0);

Answer 2

您可以在打字稿中簡單地使用for循環

定義這樣的費用

expenses: Array<Expense>

在構造函數中，請在下面編寫代碼

this.expenses = new Array<Expense>()
let x = new Expense('car payment', 350);
this.expenses.add(x);
//or
this.expenses.push(x);

之后在onCalculate寫這個

let sum = 0
for (let item of expenses) {
   sum += item.Price;
}

有關typescriptlang網站上Loop研究迭代器和生成器的更多信息