I am utilizing a mock-service that is configured in the following way:
import { Article } from "./article";
export const ARTICLES: Article[] = [
new Article(
1,
'used',
5060639120949,
'Monster Energy',
'NLZ0930EG',
'Espresso Monster Vanilla + Espresso',
'Ein Espressomischgetränk mit Taurin, Milch und Vanilla-Flavour.',
'../../assets/monster-espresso-vanilla.jpg',
2.00,
1,
12,
0.2,
8,
15,
8
),
new Article(
2,
'used',
4018931180179,
'G Data',
'NLZ0930EG',
'G Data Inernet Secuirty Lizenzurkunde',
'Lizenzurkunde der Vollversion von G Data Internet Security.',
'../../assets/gdata-lizenzurkunde.jpg',
40.00,
1,
12,
0.2,
8,
15,
0
),
new Article(
3,
'used',
4101090000638,
'Staatl. Fachingen',
'NLZ0930EG',
'Mineralwasser Medium',
'Mineralwasser Medium feinperlend und erfrischend.',
'../../assets/staatl.-fachingen-medium.jpg',
0.89,
1,
57,
1,
10,
25,
10
)
]
I access this mock Array inside my data-service as shown below:
import { Injectable } from '@angular/core';
import { Article } from '../model/article';
import { ARTICLES } from '../model/mock-data';
@Injectable({
providedIn: 'root'
})
export class DataService {
private articles: Article[] = ARTICLES;
articleCopy: Article[] = [...this.articles];
fetchNeededArticle(eanCodeOfNeededArticle: number): Article {
console.log(eanCodeOfNeededArticle);
console.log(this.articleCopy);
console.log(this.articleCopy.find(key => key.eanCode === eanCodeOfNeededArticle));
const article: Article = this.articleCopy.find(article => article.eanCode === eanCodeOfNeededArticle);
console.log('Ich wurde gefunden: ' + article);
return article;
}
constructor() { }
}
I have created a method within a different component to change the initialQuantity value of a specific article as follows:
import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { Article } from 'src/app/model/article';
import { DataService } from 'src/app/services/data.service';
@Component({
selector: 'app-article-preview',
templateUrl: './article-preview.component.html',
styleUrls: ['./article-preview.component.css']
})
export class ArticlePreviewComponent implements OnInit {
@Input() eanCodeOfNeededArticle: number;
@Output() upcomingStep = new EventEmitter<string>();
@Output() fetchedArticle = new EventEmitter<Article>();
articleForConfiguration: Article;
changeStep(upcomingStep: string): void {
this.upcomingStep.emit(upcomingStep);
}
initializeQuantity(operation: string): void {
switch(operation){
case 'substract':
this.articleForConfiguration.initialQuantity = this.articleForConfiguration.initialQuantity - 1;
console.log(this.articleForConfiguration.initialQuantity);
break;
case 'add':
this.articleForConfiguration.initialQuantity = this.articleForConfiguration.initialQuantity + 1;
break;
}
}
fetchNeededArticle(eanCodeOfNeededArticle: number): void {
const newArticle = this.dataService.fetchNeededArticle(eanCodeOfNeededArticle);
this.articleForConfiguration = newArticle;
}
constructor(private dataService: DataService) { }
ngOnInit() {
console.log('Wir brauchen dich: ' + this.eanCodeOfNeededArticle);
if(this.eanCodeOfNeededArticle) {
this.fetchNeededArticle(this.eanCodeOfNeededArticle);
}
}
}
However, every time I request the article again and change the initialQuantity value using the `initializeQuantity()` function, it affects not only the current application state but also changes deeply inside the mock-service data. Despite my efforts to carefully manage the state by making copies of the mock Array multiple times using the spread operator, this issue persists.
Can anyone help me identify where the problem lies?
Thank you in advance and have a wonderful day!