使用Bootstrap轮播在单个轮播项目中显示多列

Question

所以我一次可以在一个项目中有四列，但是当我实现' carousel '类（html文件中的第4格）时，前两个项目就可以正常显示了。但是在最后一项中，因为它应该只包含任务名称为9和10的2列，所以任务名称 1 和 5 也会显示在其中。

如果我未实现轮播类，则数据显示正常，但轮播按钮停止工作。

'我已经尝试过堆栈溢出时提供的不同解决方案。 '

这是我的HTML文件

    <!-- my tasks -->
<div class="row mt-3 mb-3">
    <div class="col-md-12">
        <!-- carousel -->

        <div class="row mx-auto my-auto">
            <div id="myTaskDiv" class="carousel slide w-100" data-ride="carousel">
                <div class="carousel-inner w-100">
                    <!-- carousel item -->
                    <div class="carousel-item {{ i == 0 ? 'active' : '' }}" *ngFor="let chunkMyTask of productData ;let i =index;">
                        <!--widget-->
                        <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let myTask of chunkMyTask">
                            <div class="widget border">
                                <div class="widget-body">
                                {{myTask.name}}
                                </div>
                            </div>
                            <!--widget end-->
                        </div>
                        <!-- carousel item end-->
                    </div>
                </div>

                <!-- carousel controls -->
                <a class="carousel-control-prev" role="button" href="#myTaskDiv" data-slide="prev">
                    <i class="fa fa-angle-left fa-3x" aria-hidden="true"></i>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" role="button" href="#myTaskDiv" data-slide="next">
                    <i class="fa fa-angle-right fa-3x" aria-hidden="true"></i>
                    <span class="sr-only">Next</span>
                </a>
                <!-- carousel controls end-->
            </div>

            <!-- carousel end -->
        </div>
    </div>
    <!-- my tasks end-->

然后这是我的.ts文件

    import { Component, OnInit } from '@angular/core';
import { task } from '../task';
import { TasksService } from '../tasks.service';
import { MyTaskServiceService } from 'src/app/dashboard/my-tasks/my-task-service.service';

@Component({
  selector: 'app-my-tasks',
  templateUrl: './my-tasks.component.html',
  styleUrls: ['./my-tasks.component.css']

export class MyTasksComponent {
  title = 'Carousel';
  productData: any;

  private myTasks: any;
  private myTaskArray: any;
  constructor(private myTaskService: MyTaskServiceService) { }

 chunks(array, size) {
  let results :any;
  results = [];
  while (array.length) {
    results.push(array.splice(0, size));
    this.num=this.num+1;
  }
  return results;
}
ngOnInit() {
  this.myTaskService.get_New_Products().subscribe(
    data => {
        this.productData = this.chunks(data.json(), 4);
        console.log(this.productData);
    });


}
}

最后这是我的json文件：

[
{
    "taskType": "myTask",
    "name": "Task 1"
},
{
    "taskType": "myTask",
    "name": "Task 2"
},
{
    "taskType": "myTask",
    "name": "Task 3"
},
{
    "taskType": "myTask",
    "name": "Task 4"
},
{
    "taskType": "myTask",
    "name": "Task 5"
},
{
    "taskType": "myTask",
    "name": "Task 6"
},
{
    "taskType": "myTask",
    "name": "Task 7"
},
{
    "taskType": "myTask",
    "name": "Task 8"
},
{
    "taskType": "myTask",
    "name": "Task 9"
},
{
    "taskType": "myTask",
    "name": "Task 10"
}

]