Angular bootstrap проблема с размерами - PullRequest
Новая
       11

Angular bootstrap проблема с размерами

0 голосов
/ 13 февраля 2020

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

Теперь я помню, что когда я использовал его в прошлом, он автоматически рендерил каждое изображение с тем же размером, что и другие, и я его не стилизовал.

Это 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>{{ img.name }}</h3>
    </div>
    <a
      href="https://www.google.fr/?q=Number+{{ i + 1 }}"
      target="_blank"
      rel="nofollow noopener noreferrer"
    >
      <div class="picsum-img-wrapper">
        <img [src]="img.img" alt="My image {{ i + 1 }} description" />
      </div>
    </a>
  </ng-template>
</ngb-carousel>

файл TS: 

import { Component, OnInit, ViewChild } from "@angular/core";
import {
  NgbCarousel,
  NgbSlideEvent,
  NgbSlideEventSource
} from "@ng-bootstrap/ng-bootstrap";
import { Sale } from "../../../models/sale";
import { SalesService } from "../../../services/sales.service";

@Component({
  selector: "app-carousel",
  templateUrl: "./carousel.component.html",
  styleUrls: ["./carousel.component.css"]
})
export class CarouselComponent implements OnInit {
  sales: Sale[];
  images = [];

  paused = false;
  unpauseOnArrow = false;
  pauseOnIndicator = false;
  pauseOnHover = true;

  @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 (
      this.pauseOnIndicator &&
      !slideEvent.paused &&
      slideEvent.source === NgbSlideEventSource.INDICATOR
    ) {
      this.togglePaused();
    }
  }

  // images = [944, 1011, 984].map(n => `https://picsum.photos/id/${n}/900/500`);

  constructor(public ss: SalesService) {}

  ngOnInit() {
    this.ss.getSales().subscribe(sales => {
      this.sales = sales;

      this.sales.forEach(s => {
        console.log(s)
        this.images.push({ img: s.img, name: s.name });
      });

    });
  }
}

Я пытался самостоятельно его стилизовать с помощью файлов css, но это не изменило много ... Я скопировал @import "~bootstrap/dist/css/bootstrap.css"; в файл стиля. css, если это имеет значение ... Почему он не рендерит все изображения одинакового размера?

...