У меня есть функция, которая хранит данные изображения, такие как имя. Через * ngFor я могу загрузить эти данные, которые находятся в базе данных и представлены в ящиках.

HTML

<div class="row tab-pane Galeria">
        <div *ngFor="let product of products" (click)="ImageInfo($event,product.id)" class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
          <div class="image-item">
            <a class="d-block image-block h-100" >
              <img [src]="Imagenss"  class="Images img-fluid" alt="">
              <div class="ImageText"> {{product.name}}</div>
            </a>
          </div>
        </div>
      </div>

Изображение 1

Вот сохраненные данные каждого изображения в базе данных.

Image1

Через (щелкнув) изображение коробки, он возвращает мне его идентификатор, и я выполняю команду get, чтобы перейти в папку, чтобы получить изображение с таким же идентификатором.

Как я могу сделать это, не используя щелчок, и все изображения загружаются без необходимости щелкать по одному для выполнения функции?

Функция GetImage

ImageInfo(e, id) {
    if (e != null) {
      this.ID = id;
    }
    let self = this;
      self.homeService.getImage(self.ID).then(function (resultado) {
        if (resultado) {
          self.Imagenss = resultado;
        }
      }).catch();
  }
0
user11052170 12 Ноя 2019 в 17:54

2 ответа

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

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#A_simple_example

0
junlan 12 Ноя 2019 в 19:45

Как я вас понял, вы хотите сразу выводить картинки без всякой логики?

Постарайтесь получить все URL-адреса изображений после получения товаров.

Например, переместите это в отдельный компонент:

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
  <div class="image-item">
    <a class="d-block image-block h-100" >
      <img [src]="Imagenss"  class="Images img-fluid" alt="">
        <div class="ImageText"> {{product.name}}</div>
     </a>
   </div>
 </div>

И внутри этого дочернего компонента что-то вроде этого:

@Input() product: TypeOfProduct
 ngOnInit() {
   this.homeService.getImage(this.product.ID).then((resultado) => {
    if (resultado) {
      this.imagenss = resultado;
    }
  }).catch();
 }

Затем из родительского компонента просто передайте продукт в качестве входных данных, например:

<div class="row tab-pane Galeria">
 <example-component *ngFor="let product of products" [product]="product"><example-component>
</div>
0
Nemanja Marinkovic 15 Ноя 2019 в 01:41
Ответ больше похож на комментарии. поэтому, пожалуйста, оставьте это в комментариях.
 – 
Raj Paliwal
12 Ноя 2019 в 18:23
Конечно, я планирую получить все URL-адреса изображений, но как я могу это сделать? Цель состоит в том, чтобы иметь функцию, которая загружает все изображения без щелчков мышью в соответствии с идентификатором, который я получаю от продуктов.
 – 
user11052170
12 Ноя 2019 в 18:29
Я пытаюсь понять ваш сценарий. Пожалуйста, поправьте меня, если я ошибаюсь. Теперь вы нажимаете на конкретный продукт и показываете список изображений, связанных с этим продуктом. А теперь хотите, чтобы он отображался без нажатия?
 – 
user3875919
12 Ноя 2019 в 18:54