如何使用 Angular 9 显示多个项目轮播？

问题描述

我有以下一段代码。我想在不使用任何库的情况下使用 Carousel 实现 Angular 9 功能。

目前，所有数据项都排成一行（它们超出给定的边框宽度）。

但是，我需要，给定的数据项应该在执行时在给定的边框宽度内默认显示连续的前六个项目。然后，如果我点击 Next，那么剩余的数据项应该只显示在该边框宽度内，同样，如果我点击 PrevIoUs，那么之前的数据项应该显示在给定的边框内 -仅宽度。

html：

<div class="prevIoUs" title="PrevIoUs" (click)="prevIoUs()">PrevIoUs</div>
<div class="data-row">
  <div class="data-list show-in-row">
    <ng-container *ngFor="let item of testData; let index = index; let last = last">
      <div class="data-container">
        <div>{{ item.name }}</div>
      </div>
    </ng-container>
  </div>
</div>
<div class="next" title="Next" (click)="next()">Next</div>

app.component.ts：

export class AppComponent {
  testData: any;
  constructor(private myServices: MyServices) {}
  ngOnInit() {
    this.myServices.getData().subscribe(
      data => {
        this.testData = data;
        console.log("data: "+JSON.stringify(this.testData));//[{"id":1,"name":"First"},{"id":2,"name":"Second"},{"id":3,"name":"Third"},{"id":4,"name":"Fourth"},{"id":5,"name":"Fifth"},{"id":6,"name":"Sixth"},{"id":7,"name":"Seventh"},{"id":8,"name":"Eigth"},{"id":9,"name":"Ninth"}]
      },(err: HttpErrorResponse) => {
        console.log("error on parsing: " + err.message);
      }
    );
  }

  prevIoUs() {}
  next() {}
}

创建Stackblitz

请任何人都可以帮助我解决这个问题。提前致谢。

解决方法

要在容器“data-row”中最多显示六列，每列“data-container”的宽度必须达到 16,667%（= 100 除以 6）。

.data-container {
  width: 16.667%;
  text-align: center;
}

为了仅显示数组中的六个项目，我们将创建仅包含这六个项目的第二个数组。我们还需要跟踪我们处于哪个迭代中，以了解要显示轮播的哪些项目。前六、后六等

testData: any;
testDataShown: any;
iTestData: number;

我们创建了一个函数，根据当前迭代从我们的完整数组中获取六个项目：

setShownData(){
    this.testDataShown = this.testData.slice(this.iTestData*6,(this.iTestData+1)*6);
}

最后，我们创建 next 和 previous 函数来修改迭代次数并修改显示的数据数组。

previous() {
    if(this.iTestData != 0) {
      this.iTestData = this.iTestData - 1;
      this.setShownData();
    }
}

next() {
    if( ((this.iTestData+1) * 6) < this.testData.length){
      this.iTestData = this.iTestData + 1;
      this.setShownData();
    }
}

您可以找到修改后的 Stackblitz here。

注意：添加固定列宽会使您的网站无响应。您真的应该考虑使用响应式设计框架（例如 Bootstrap）。