Отображение нескольких столбцов в одном элементе карусели с помощью карусели Bootstrap

Question

Таким образом, я могу иметь по четыре столбца в одном элементе одновременно, но когда я реализую класс ' carousel ' (4-й элемент div в html-файле), тогда первые два элемента отображаются нормально.Но в последнем элементе, поскольку он должен иметь только 2 столбца с именами задач 9 и 10, вместо этого там также отображаются имена задач 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"
}

]