Angular Ionic3 TypeScript - 从数组拼接后未定义的 "TypeError: Cannot read property ' 名称'

Question

我对所有这一切都很陌生，所以请放轻松，我已经搜索了所有我能想到的东西，但我就是想不通。

我目前正在构建一个 ionic3 应用程序并设置了购物 list ，以便用户可以将食谱添加到购物 list - 这工作正常 - 但我想调整它以便如果添加多个相同的项目，而不是具有相同项目的两个实例，它更新第一个项目以显示它具有新数据。我可以通过服务发送项目并在另一个页面上检索它们，我可以按字母顺序对它们进行排序，但我无法使用合并功能。

非常感谢您的帮助。

这是(希望)相关代码:

import { Injectable } from "@angular/core";
import { Storage } from "@ionic/storage";
import { SLIngredient } from "../data/shopping-interface";

@Injectable()
export class ShoppingService {
  storedDay: SLIngredient[] = []
  storedWeek: SLIngredient[]
  userSL: SLIngredient[] = []
  sortedList: SLIngredient[] = []
  mergedItem: SLIngredient;
  mergedList: SLIngredient[] = [];

  constructor(private storage: Storage) {}

  getShoppingDay(day: number) {
    return this.storage.get('shoppingDay/' + day)
      .then(
        (storedDay: SLIngredient[]) => {
          this.storedDay = storedDay != null ? storedDay : [];
          return this.storedDay.slice();
        }
      )
  }

  getShoppingWeek(id: number) {
    return this.storage.get('shoppingWeek/' + id)
      .then(
        (storedWeek: SLIngredient[]) => {
          this.storedWeek = storedWeek != null ? storedWeek : [];
          return this.storedWeek.slice();
        }
      )
  }

  addItem(name: string, amount: number, measurement: string, completed: boolean) {
    this.userSL.push(new SLIngredient(name, amount, measurement, completed));
  }

  addItems(items: SLIngredient[]) {
    this.userSL.push(...items);
    this.sort()
    this.setUserSL();
    console.log(this.userSL)
  }

  getItems() {
    this.getUserSL;
    return this.userSL.slice();
  }

  sort() {
    this.sortedList = this.userSL.sort((itemA: SLIngredient, itemB: SLIngredient) => {
      const a = itemA.name.toLowerCase()
      const b = itemB.name.toLowerCase()

      if (a > b) return 1;
      if (a < b) return -1;
      if (a == b) {
        this.merge(itemA, itemB);
      }

      return 0
    })

    this.userSL = this.sortedList
  }

  merge(itemA: SLIngredient, itemB: SLIngredient) {
    const newAmount = +itemA.amount + +itemB.amount
    const itemC = new SLIngredient(itemA.name, newAmount, itemA.measurement, itemA.completed)
    this.sortedList.splice(this.sortedList.indexOf(itemA), 1, itemC);
    this.sortedList.splice(this.sortedList.indexOf(itemB), 1);
    // this.sortedList = Object.assign(itemA, itemB, itemC)
    // this.mergedList.push(new SLIngredient(merge.name, merge.amount, merge.measurement, merge.completed))
    // this.sortedList.push(this.mergedItem)
  }

  setUserSL() {
    this.storage.set('userSL', this.userSL)
  }

  getUserSL() {
    return this.storage.get('userSL')
      .then(
        (userSL: SLIngredient[]) => {
          this.userSL = userSL != null ? userSL : [];
          return
          this.userSL.slice();
        }
      )
  }
}

.sort() 函数是该函数运行的地方，我发现问题出在 .merge() 函数上。

这是界面:

export class SLIngredient {

constructor(
    public name: string,
    public amount: number,
    public measurement: string,
    public completed: boolean
){}

我真的很感谢任何人可以提供的任何形式的帮助，因为我对这一切都很陌生。

再次感谢。

编辑

当我尝试打电话时

    sort(){
    this.userSL.reduce((reduced, element) => {
        const index = reduced.findIndex(r => r.name.toLowerCase() === element.name.toLowerCase());

        if (index === -1) return [...reduced, element];

        reduced[index].amount += element.amount;

        return reduced;
      }, []).sort((a, b) => {
        const nameA = a.name.toLowerCase()
        const nameB = b.name.toLowerCase()

        if (nameA > nameB) return 1;
        if (nameA < nameB) return -1;

        return 0
      })
}

这是在将两个相同的食谱添加到购物 list 后我在日志中得到的输出:

    (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    0: {name: "rolled oats", amount: "1", measurement: "cup"}
    1: {name: "milled flax seed", amount: "1-2", measurement: "tbsp"}
    2: {name: "ground cinnamon", amount: "1", measurement: "tsp"}
    3: {name: "non-diary milk of your choice - Coconut is best", amount: "1.5", measurement: "cups"}
    4: {name: "desiccated coconut", amount: "1", measurement: "tbsp"}
    5: {name: "banana", amount: "1", prep: "sliced"}
    6: {name: "frozen mixed berries or fresh seasonal berries (optional)", amount: "1", measurement: "handful"}
    7: {name: "raisins (optional)", amount: "1", measurement: "handful"}
    8: {name: "cocoa powder (optional)", amount: "1", measurement: "tsp"}
    length: 9
    __proto__: Array(0)

    (18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    0: {name: "rolled oats", amount: "11", measurement: "cup"}
    1: {name: "milled flax seed", amount: "1-21-2", measurement: "tbsp"}
    2: {name: "ground cinnamon", amount: "11", measurement: "tsp"}
    3: {name: "non-diary milk of your choice - Coconut is best", amount: "1.51.5", measurement: "cups"}
    4: {name: "desiccated coconut", amount: "11", measurement: "tbsp"}
    5: {name: "banana", amount: "11", prep: "sliced"}
    6: {name: "frozen mixed berries or fresh seasonal berries (optional)", amount: "11", measurement: "handful"}
    7: {name: "raisins (optional)", amount: "11", measurement: "handful"}
    8: {name: "cocoa powder (optional)", amount: "11", measurement: "tsp"}
    9: {name: "rolled oats", amount: "11", measurement: "cup"}
    10: {name: "milled flax seed", amount: "1-21-2", measurement: "tbsp"}
    11: {name: "ground cinnamon", amount: "11", measurement: "tsp"}
    12: {name: "non-diary milk of your choice - Coconut is best", amount: "1.51.5", measurement: "cups"}
    13: {name: "desiccated coconut", amount: "11", measurement: "tbsp"}
    14: {name: "banana", amount: "11", prep: "sliced"}
    15: {name: "frozen mixed berries or fresh seasonal berries (optional)", amount: "11", measurement: "handful"}
    16: {name: "raisins (optional)", amount: "11", measurement: "handful"}
    17: {name: "cocoa powder (optional)", amount: "11", measurement: "tsp"}
    length: 18
    __proto__: Array(0)

第二次编辑

这是我仍然有问题的部分:

    addItems(items: SLIngredient[]){
    this.userSL.push(...items);
    this.sort()
    this.setUserSL();
    console.log(this.userSL)
}

sort(){
    this.mergedList = this.userSL.reduce((reduced, element) => {
        const index = reduced.findIndex(r => r.name.toLowerCase() === element.name.toLowerCase());

        if (index === -1) return [...reduced, element];

        reduced[index].amount += element.amount;

        return reduced;
      }, []).sort((a, b) => {
        const nameA = a.name.toLowerCase()
        const nameB = b.name.toLowerCase()

        if (nameA > nameB) return 1;
        if (nameA < nameB) return -1;

        return 0
      })
      this.userSL = this.mergedList
}

setUserSL(){
    this.storage.set('userSL', this.userSL)
}

所以我调用了 addItems() 函数，它将它添加到数组中，但它也会立即合并它，然后出于某种原因，它认为该成分本身有 2 个，所以当它再次添加时，它会加倍，而不仅仅是加一个。

另一个问题是它显示更新后的值，而不是仅仅将其推送到可以在其他地方显示的数组。

     (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
     0: {name: "banana/s", amount: 1, prep: "mashed"}
     1: {name: "rolled oats", amount: 1, measurement: "cup"}
     2: {name: "milled flaxseed", amount: 2, measurement: "tbsp"}
     3: {name: "ground cinnamon", amount: 1, measurement: "tsp"}
     4: {name: "non-dairy milk of your choice (I use Almond)", amount: 1.5, measurement: "cup/s"}
     5: {name: "frozen mixed berries or fresh seasonal berries (optional)", amount: 1, measurement: "handful/s"}
     6: {name: "raisins (optional)", amount: 1, measurement: "handful/s"}
     7: {name: "cocoa powder (optional)", amount: 1, measurement: "tsp"}
     8: {name: "desiccated coconut (optional)", amount: 2, measurement: "tsp"}

变成:

(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
 0: {name: "banana/s", amount: 2, prep: "mashed"}
 1: {name: "cocoa powder (optional)", amount: 2, measurement: "tsp"}
 2: {name: "desiccated coconut (optional)", amount: 4, measurement: "tsp"}
 3: {name: "frozen mixed berries or fresh seasonal berries (optional)", amount: 2, measurement: "handful/s"}
 4: {name: "ground cinnamon", amount: 2, measurement: "tsp"}
 5: {name: "milled flaxseed", amount: 4, measurement: "tbsp"}
 6: {name: "non-dairy milk of your choice (I use Almond)", amount: 3, measurement: "cup/s"}
 7: {name: "raisins (optional)", amount: 2, measurement: "handful/s"}
 8: {name: "rolled oats", amount: 2, measurement: "cup"}
 length: 9
 __proto__: Array(0)

成为

(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "banana/s", amount: 4, prep: "mashed"}
1: {name: "cocoa powder (optional)", amount: 4, measurement: "tsp"}
2: {name: "desiccated coconut (optional)", amount: 8, measurement: "tsp"}
3: {name: "frozen mixed berries or fresh seasonal berries (optional)", amount: 4, measurement: "handful/s"}
4: {name: "ground cinnamon", amount: 4, measurement: "tsp"}
5: {name: "milled flaxseed", amount: 8, measurement: "tbsp"}
6: {name: "non-dairy milk of your choice (I use Almond)", amount: 6, measurement: "cup/s"}
7: {name: "raisins (optional)", amount: 4, measurement: "handful/s"}
8: {name: "rolled oats", amount: 4, measurement: "cup"}
length: 9
__proto__: Array(0)

每次我添加新内容时它都会翻倍。包含成分的实际页面(应该说大多数事情中的一种)如下所示:

再次感谢您的所有意见。

Answer 1

您要在排序函数中更改数组的结构，这是大忌。排序函数返回一个根据排序函数排序的新数组，它不会改变原始数组。您应该首先使用 reduce 合并重复项，然后对数组进行排序。

userSL.reduce((reduced, element) => {
  const index = reduced.findIndex(r => r.name.toLowerCase() === element.name.toLowerCase();

  if (index === -1) return [...reduced, element];

  reduced[index].amount += element.amount;

  return reduced;
}, []).sort((a, b) => {
  const nameA = a.name.toLowerCase()
  const nameB = b.name.toLowerCase()

  if (nameA > nameB) return 1;
  if (nameA < nameB) return -1;

  return 0
})

在 reduce 中，我们将一个元素一个一个地添加到结果数组(减少)，但是如果我们发现当前元素已经被添加，我们只需更新已添加元素的数量。排序是直接的，因为数组已经合并。

这不是最有效的实现，它可能无法编译(我直接写在这里)，但想法很简单，应该可行。