Question

我想展示一个轮播，该轮播遍历从后端动态加载的数组。我想要一个多项目轮播，对于静态图像来说似乎工作得很好。

当我使用给定的变量而不是给img的src的直接字符串时，我使用了在component.ts中设置的变量，该图像仅在幻灯片处于活动状态时才加载，否则就不会显示。最后，当ngFor开始播放时，情况变得更加糟糕。

在这里，我向您展示使用不同代码获得的三种行为：

这是component.ts，其中包含要显示的图像的网址列表：

@Component({
  selector: 'app-carrousel',
  templateUrl: './carrousel.component.html',
  styleUrls: ['./carrousel.component.scss']
})
export class CarrouselComponent implements OnInit {
 list_cards = [
    {url: 'http://placehold.it/350x180?text=1', title: 'Card 1', descrption: 'description of card 1'},
    {url: 'http://placehold.it/350x180?text=2', title: 'Card 2', descrption: 'description of card 2'},
    {url: 'http://placehold.it/350x180?text=3', title: 'Card 3', descrption: 'description of card 3'},
    {url: 'http://placehold.it/350x180?text=4', title: 'Card 4', descrption: 'description of card 4'},
    {url: 'http://placehold.it/350x180?text=5', title: 'Card 5', descrption: 'description of card 5'},
    {url: 'http://placehold.it/350x180?text=6', title: 'Card 6', descrption: 'description of card 6'}
  ];

 ngOnInit(): void {
    $('#carousel_new_items').carousel({
      interval: 2000
    });

    $('.carousel .carousel-item').each(function() {
      let next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));

      for (let i = 0; i < 4; i++) {
        next = next.next();
        if (!next.length) {
          next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
      }
    });
  }

}

这是行为1的component.html，没有循环，并且所有图像src都带有直接字符串：

<div id="carousel_new_items" class="carousel slide w-100" data-ride="carousel">
  <div class="carousel-item active">
    <div class="card col-3">
      <img class="card-img-top" src="http://placehold.it/350x180?text=1">
      <div class="card-body">
        <p>{{this.list_cards[0].title}}</p>
        <p>{{this.list_cards[0].descrption}}</p>
        <p>static text car 1</p>
      </div>
    </div>
  </div>
  ...
  <div class="carousel-item">
    <div class="card col-3">
      <img class="card-img-top" src="http://placehold.it/350x180?text=5">
      <div class="card-body">
        <p>{{this.list_cards[5].title}}</p>
        <p>{{this.list_cards[5].descrption}}</p>
        <p>static text car 6</p>
      </div>
    </div>
  </div>
</div>

这是行为2，无循环以及对象列表中带有字符串的所有图像src的component.html：

<div id="carousel_new_items" class="carousel slide w-100" data-ride="carousel">
  <div class="carousel-item active">
    <div class="card col-3">
      <img class="card-img-top" src="{{this.list_cards[0].url}}">
      <div class="card-body">
        <p>{{this.list_cards[0].title}}</p>
        <p>{{this.list_cards[0].descrption}}</p>
        <p>static text car 1</p>
      </div>
    </div>
  </div>
  ...
  <div class="carousel-item">
    <div class="card col-3">
      <img class="card-img-top" src="{{this.list_cards[5].url}}">
      <div class="card-body">
        <p>{{this.list_cards[5].title}}</p>
        <p>{{this.list_cards[5].descrption}}</p>
        <p>static text car 6</p>
      </div>
    </div>
  </div>
</div>

这是行为3的component.html，使用对象列表中的字符串循环遍历list_cards和所有图像src：

<div id="carousel_new_items" class="carousel slide w-100" data-ride="carousel">
  <div class="carousel-item" *ngFor="let card_item of list_cards let i= index" [ngClass]="{'active' : i == 0}">
    <div class="card col-3">
      <img class="card-img-top" src="{{card_item.url}}">
      <div class="card-body">
        <p>{{card_item.title}}</p>
        <p>{{card_item.descrption}}</p>
      </div>
    </div>
  </div>
</div>

行为1（所有卡都可以）：

行为2（仅在存储卡处于活动状态时显示图像）：

行为3（全部移至左侧，一次仅显示活动幻灯片）：

请！有人可以帮助我获得行为3的行为类似于1的行为吗？任何想法都非常受欢迎！

ngFor动态数组循环，用于引导轮播多个项目

0 个答案: