Angular Ionic3 TypeScript - "TypeError: Cannot read property 'name' of undefined" after splicing from an Array
Angular Ionic3 TypeScript - "TypeError: Cannot read property 'name' of undefined" after splicing from an Array
我对所有这一切都很陌生，所以请放轻松，我已经搜索了所有我能想到的东西，但我就是想不通。
我目前正在构建一个 ionic3 应用程序并设置了购物清单，以便用户可以将食谱添加到购物清单 - 这工作正常 - 但我想对其进行调整，以便在添加多个相同项目时，而不是同一项目的两个实例，它更新第一个项目以表明它有新数据。我可以通过服务发送项目并在另一个页面上检索它们，我可以按字母顺序对它们进行排序，但我无法使用合并功能。
非常感谢您的帮助。
这是（希望）相关代码：
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
})
}
这是在将两个相同的食谱添加到购物清单后我在日志中得到的输出：
(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)
而且每次我添加新内容时它都会翻倍。
包含成分的实际页面（应该说大多数事情中的一种）如下所示：
再次感谢您的所有意见。
我想你可以简单地过滤 this.sortedList
this.sortedList.filter(a => a.name !== itemA.name && a.name !== itemB.name)
然后将 itemC 推入数组。
您要在排序函数中更改数组的结构，这是大禁忌。排序函数 returns 根据排序函数排序的新数组，它不会改变原始数组。您应该先使用 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中，我们将一个元素一个一个地添加到结果数组中（减少），但是如果我们发现当前元素已经被添加，我们只需更新已添加元素的数量。排序是直接的，因为数组已经合并。
这不是最高效的实现，可能无法编译（我这里直接写了），但思路很简单，应该可以。
我对所有这一切都很陌生，所以请放轻松，我已经搜索了所有我能想到的东西，但我就是想不通。
我目前正在构建一个 ionic3 应用程序并设置了购物清单，以便用户可以将食谱添加到购物清单 - 这工作正常 - 但我想对其进行调整，以便在添加多个相同项目时，而不是同一项目的两个实例，它更新第一个项目以表明它有新数据。我可以通过服务发送项目并在另一个页面上检索它们，我可以按字母顺序对它们进行排序，但我无法使用合并功能。
非常感谢您的帮助。
这是（希望）相关代码：
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
})
}
这是在将两个相同的食谱添加到购物清单后我在日志中得到的输出：
(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)
而且每次我添加新内容时它都会翻倍。 包含成分的实际页面（应该说大多数事情中的一种）如下所示：
再次感谢您的所有意见。
我想你可以简单地过滤 this.sortedList
this.sortedList.filter(a => a.name !== itemA.name && a.name !== itemB.name)
然后将 itemC 推入数组。
您要在排序函数中更改数组的结构，这是大禁忌。排序函数 returns 根据排序函数排序的新数组，它不会改变原始数组。您应该先使用 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中，我们将一个元素一个一个地添加到结果数组中（减少），但是如果我们发现当前元素已经被添加，我们只需更新已添加元素的数量。排序是直接的，因为数组已经合并。
这不是最高效的实现，可能无法编译（我这里直接写了），但思路很简单，应该可以。