Question

我遇到了问题，我无法在TypeScript中解决它。我使用的是Angular，此代码来自服务。我有这一系列的成分：

private ingredients: Ingredient[] = [
  new Ingredient('farina', 500),
  new Ingredient('burro', 80),
  new Ingredient('uccellini', 5)
];

这是型号：export class Ingredient {constructor(public name: string, public amount: number){}}

现在我想向数组中添加新的成分，并使用新数组的副本发出一个事件：这有效：

newIngredients = [
  new Ingredient('mais', 100),
  new Ingredient('uccellini', 5)
];

addIngredients(newIngredients: Ingredient[]) {
  this.ingredients.push(...ingredients);
  this.ingredientsChanged.emit(this.ingredients.slice());
}

但是我想检查配料数组中是否存在新的配料对象，如果它存在，则将新旧金额值相加到一个对象中，然后推送更新的对象，然后返回数组的副本

预期产出：

[
  new Ingredient('farina', 500),
  new Ingredient('burro', 80),
  new Ingredient('uccellini', 10)
  new Ingredient('mais', 100)
];

我尝试使用Set，WeakSet，Map等方式，但我不太了解Typescript。这就是我被困的地方：

addIngredients(newIngredients: Ingredient[]) {

  let hash = {};
  this.ingredients.forEach(function (ingr) {
    hash[ingr.name] = ingr;
  });

let result = newIngredients.filter(function (ingr) {
  if (!(ingr.name in hash)) {
    return !(ingr.name in hash);
  } else {
    // ???
  }
});

  this.ingredients.push(...result);
  this.ingredientsChanged.emit(this.ingredients.slice());
}

感谢您的帮助

Answer 1

假设你有两个数组

df.groupby(df.a.str.replace('\d+', '')).b.sum()
Out[1353]: 
a
bar     7
foo    13
Name: b, dtype: int64

和

const ingredients: Ingredient[] = [
  new Ingredient('farina', 500),
  new Ingredient('burro', 80),
  new Ingredient('uccellini', 5)
];

如果添加不存在的成分并组合存在的成分，您希望将它们组合起来

你可以做的是组合两个数组，然后减少直到只有一个列表

const newIngredients = [
  new Ingredient('mais', 100),
  new Ingredient('uccellini', 5)
];

Answer 2

以下是代码段：

Stackblitz网址：https://stackblitz.com/edit/angular-uf4dcr

<强> app.component.html

<button (click)="add()">Add</button>

<ul>
  <li *ngFor="let ing of ingredients">
    {{ing.name}} - {{ing.amount}}
  </li>
</ul>

<强> app.component.ts

import { Component } from '@angular/core';

class Ingredient {
  constructor(public name: string, public amount: number){ }
}



@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';

  private ingredients: Ingredient[] = [
    new Ingredient('farina', 500),
    new Ingredient('burro', 80),
    new Ingredient('uccellini', 5)
  ];

  addIngredients(newIngredients: Ingredient) {

    let exist: boolean = false;
    this.ingredients.forEach(function (ingr) {
      if(ingr["name"] == newIngredients["name"]) {
        ingr["amount"] += newIngredients["amount"];
        exist = true;
      }
    });

    if(!exist) {
      this.ingredients.push(newIngredients);
    }

      //this.ingredientsChanged.emit(this.ingredients.slice());
      console.log([...this.ingredients]); //return copy of the updated array
  }

  add() {
    this.addIngredients({name: 'farina', amount:10});
    this.addIngredients({name: 'new item', amount:100});
  }

}

Answer 3

更新回答：

在forEach中无法访问'this.ingredients'，因为该函数调用的上下文已更改
因此将'this'分配给'that'变量，这样就可以在forEach内部访问'that.ingredients'

StackBlitz网址：https://stackblitz.com/edit/angular-fulrcg

addIngredients(newIngredients: Ingredient[]) {

    let exist: boolean = false;
    let that = this;
    //debugger;
    console.log(this.ingredients);
    newIngredients.forEach(function(newIngr, newKey) {
      exist = false;
      console.log(newIngr);
      that.ingredients.forEach(function (ingr, key) {
        if(ingr["name"] == newIngr["name"]) {
          ingr["amount"] += newIngr["amount"];
          exist = true;
        }
      });
      if(!exist) {
        **that.ingredients**.push(newIngr);
      }
    });

角度检查匹配两个数组中的对象，TypeScript最佳方式

3 个答案: