Почему я получаю дубликат дополнения к строке, когда перезаписываю ее?

Question

Моя цель: вызвать функцию в сервисе из компонента, который вернет мне строковый массив.

Я получаю массив в первый раз, и это нормально. например: http://localhost: 4200 / assets / images / hardwoods / american_white_oak.png

Но когда я перехожу на другую страницу и снова попадаю на ту же страницу, я получаю массив с добавление: http://localhost: 4200 / активы / изображения / лиственные породы / american_white_oak.png.png (дубликат ".png").

Я не понимаю почему изображения массива в компоненте не переопределяются каждый раз, когда я меняю страницу, и почему, если она не переопределяется - почему к ней добавляется только строка ".png"?

Краткое объяснение этой части кода: Я вызываю функцию в службе. Эта функция: 1. создает новый строковый массив, присваивает ему массив из объекта в модели. Объект создается конструктором внутри сервиса. 2. запуск для l oop на нем и внутри: делит / разделяет. В нижний регистр Добавьте строку слева и справа. Выход на l oop. 3. возврат измененного массива.

Html файл компонента

<ngb-carousel #carousel interval="3000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
<ng-template ngbSlide *ngFor="let img of images; index as i">
  <div class="carousel-caption">
    <h3>{{imageNames[i]}}</h3>
  </div>
  <div class="picsum-img-wrapper">
    <img [src]="img" alt="img">
  </div>
</ng-template>  

TS компонента

import { Component, ViewChild, OnInit } from '@angular/core';
import { NgbCarousel, NgbSlideEvent, NgbSlideEventSource } from '@ng-bootstrap/ng-bootstrap';
import { ImageService } from 'src/app/services/image.service';
import { from } from 'rxjs';


@Component({
  selector: 'app-hardwood-heb',
  templateUrl: './hardwood-heb.component.html',
  styleUrls: ['./hardwood-heb.component.css'],

})
export class HardwoodHebComponent implements OnInit {

  public images: string[] = new Array<string>();
  public imageNames: string[] = new Array<string>();
  unpauseOnArrow: boolean = false;
  paused: boolean = false;
  pauseOnHover: boolean = true;

  constructor(private imageService: ImageService) {

  }
  ngOnInit() {
    this.images=[];
    this.imageNames = this.imageService.getImageName();
    this.images = this.imageService.getHardwoodImagesPath();
    this.images.forEach(element => {
      console.log(element);
    });

  }




  @ViewChild('carousel', { static: true }) carousel: NgbCarousel;

  togglePaused() {
    if (this.paused) {
      this.carousel.cycle();
    } else {
      this.carousel.pause();
    }
    this.paused = !this.paused;

  }

  onSlide(slideEvent: NgbSlideEvent) {
    if (this.unpauseOnArrow && slideEvent.paused &&
      (slideEvent.source == NgbSlideEventSource.ARROW_LEFT || slideEvent.source == NgbSlideEventSource.ARROW_RIGHT)) {
      this.togglePaused();
    }
    if (!slideEvent.paused && slideEvent.source == NgbSlideEventSource.INDICATOR) {
      this.togglePaused();
    }
  }

}

Модель

export class Hardwood {
    public readonly name: Array<string> = ['אגוז אפריקאי','אגוז אמריקאי','אורן קרולינה','אורן קליר','אלון אדום אמריקאי',
    'אלון לבן אמריקאי','אלון אירופאי','בוק מוקצע','מייפל הארד','ספלי מהגוני','פופלר','דובדבן \ שרי','אשה'];
    // Altname uses also for path name!
    public readonly altName: Array<string> =['African Black Ofram','American Walnut','American Southern yellow pine','American Duglas fir','American Red Oak',
    'American White Oak','European Oak','European Beechwood','American Hard Maple','African Mahagoni Sapelli','American Yellow Poplar','American Cherry','American White Ash'];


}

Сервис

import { Hardwood } from 'src/app/models/hardwood';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ImageService {

  constructor(private hardwoods:Hardwood) { }

  public getHardwoodImagesPath():string[]{
    let str: string[] = this.hardwoods.altName;
    for ( var i = 0; i < str.length; i++ ){
      str[i] = str[i].split(' ').join('_');
      str[i] = str[i].toLocaleLowerCase();
      str[i] = `../../../assets/images/hardwoods/${str[i]}.png`;
    }
    return str;
  }

  public getImageName():string[]{
    return this.hardwoods.name; 
  }
}

Answer 1

Вы изменяете свой исходный массив.

Самое простое решение, которое вы можете сделать, это взять копию массива лиственных пород, используя slice. Это создаст копию массива, с которым вы можете безопасно работать без изменения оригинала.

public getHardwoodImagesPath():string[]{
  const str: string[] = this.hardwoods.altName.slice();
  for (let i = 0; i < str.length; i++) {
    str[i] = str[i].split(' ').join('_');
    str[i] = str[i].toLocaleLowerCase();
    str[i] = `../../../assets/images/hardwoods/${str[i]}.png`;
  }
  return str;
}

Причина, по которой

Когда вы делаете это:

const str: string[] = this.hardwoods.altName;

Вы только копируете ссылку на исходный массив. Это не отличается от работы с исходным массивом напрямую. Поэтому, когда вы делаете это:

str[i] = str[i].split(' ').join('_');

Вы фактически обновляете i-ю запись в исходном массиве.

Используя map

Вы можете улучшить это объединяя l oop и отображение в одну функцию, используя функцию массива map.

public getHardwoodImagesPath():string[]{
  const path = '../../../assets/images/hardwoods/';
  return this.hardwoods.altName.
    .map(x => `${path}${x.replace(/ /g, '_').toLowerCase()}.png`);
}

Это объединяет l oop, замену строки и новый массив. Мой первый ответ гораздо эффективнее - я просто хотел выделить проблему, а не отвлекаться на другие улучшения.

Answer 2

Курт Гамильтон помог мне понять мою ошибку. Так что я сделал то, что я научился делать (по-другому). Теперь все отлично работает.

  public getHardwoodImagesPath():string[]{
    let str: string[] = new Array<string>();  // Declared a new array
    for ( var i = 0; i < this.hardwoods.altName.length; i++ ){
      str[i]= this.hardwoods.altName[i]; // Get the value only..
      str[i] = str[i].split(' ').join('_');
      str[i] = str[i].toLocaleLowerCase();
      str[i] = `../../../assets/images/hardwoods/${str[i]}.png`;
    }
    return str;
  }