Блог

У меня есть API, который отправляет мне имена изображений, которые мне нужно использовать в моем HTML ( part_image ):

Я использую практически всю информацию из этого API и отображаю их с помощью a *ngFor в своем HTML, НО для изображений я хочу отображать их только 1 раз, поскольку многие «части» могут иметь одинаковое представление img, как мне это сделать?

У меня есть все изображения, хранящиеся в моем файле ресурсов, я попытался использовать и переменную envrionment, указав только путь к изображениям: photosPath: '../../../../../../../assets/' но теперь я изо всех сил пытаюсь отобразить их только один раз, на мой взгляд, я мог бы использовать несколько указателей на то, что я должен использовать, чтобы это сделать. Я попытался создать массив, который будет искать в каждой «части» название фотографии без рендеринга дубликатов.

Component.ts

 import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {QuotationMenuService} from '../../quotation-menu.service';
import {ActivatedRoute} from '@angular/router';
import {environment} from '../../../../../../../environments/environment';


@Component({
  selector: 'app-network-template',
  templateUrl: './network-template.component.html',
  styleUrls: ['./network-template.component.scss']
})
export class NetworkTemplateComponent implements OnChanges, OnInit {

  constructor(private formBuilder: FormBuilder,
              private service: QuotationMenuService,
              private activatedRoute: ActivatedRoute
  ) { }

  get f() {
    return this.networkForm.controls;
  }

  networkForm: FormGroup;

  @Input()dataDynLevel: number;
  @Input()dataDynParts: Event;
  @Input()quotationId: Event;
  @Input() longueur: number;
  @Input() quantity: number;

  @Output() sendTotalLevelNetwork = new EventEmitter<any>();

  dataDiam1: any;
  dataDiam2: any;
  filteredWithDiam: any;
  quotArray: any;
  part_id: any;
  photos: [];
  photosPath = environment.photosPath;

  selectedDiam: any;

  ngOnInit() {
    this.createForm();
    this.initQuot();
  }



//selectedDiam = the array from first picture
  initQuot() {
    this.service.urlQuot = this.activatedRoute.snapshot.paramMap.get('quotId');
    this.service.checkExistQuot().subscribe(res => {
      this.quotArray = res.quotation.quotationdetail2;
      console.log(this.quotArray, 'QUOT ARRAY')
      this.networkForm.patchValue({
          quantity: this.selectedDiam.quantity,
          longueur: this.selectedDiam.longueur
        },
        {emitEvent: true});
    });
  }


  ngOnChanges() {
    this.filterDrop();
  }



  filterDrop() {
    this.dataDiam1 = this.dataDynParts;
    let dynDiam1 = this.dataDiam1.map(obj => obj.diam[0]);
    dynDiam1 = dynDiam1.filter((v, i) => dynDiam1.indexOf(v) === i);
    this.dataDiam1 = dynDiam1;


    this.dataDiam2 = this.dataDynParts;
    let dynDiam2 = this.dataDiam2.map(obj => obj.diam[1]);
    dynDiam2 = dynDiam2.filter((v, i) => dynDiam2.indexOf(v) === i);
    this.dataDiam2 = dynDiam2;
    this.requiredFields();
    this.filteredWithDiam = this.dataDynParts;
    this.selectedDiam = this.dataDynParts;
    console.log(this.selectedDiam);


//Here's where I tried to push each part_image without duplicates into the array photos
    this.selectedDiam.sort(function (a, b) {
      var photo = a.part_image;
      var photo2 = b.part_image;
      if (photo < photo2) {
        return -1;
      }
      if (photo > photo2) {
        return 1;
      }
      const arr = [];
      arr.push(photo);
      console.log(photo);

      // names must be equal
      return 0;
    });

  }




}
  

Component.html

 <div class="products">
  <div class="d-flex flex-row linesColor" *ngFor="let products of selectedDiam">
    <img src=>
    <a class="flex1">{{photosPath}}</a>
    <a class="flex1">{{products.diam}}</a>
    <a class="flex1">{{products.price1}}</a>
    <a class="flex1 mb-1">
    <input ngModel="{{products.longueur}}"  (ngModelChange)="postQuotationDatas($event,products,'longueur')" class="number" type="number">
    </a>
    <a class="flex1">Total</a>
  </div>
</div>
  

Заранее благодарю вас за ваше время и вашу помощь.