Инкрементная переменная не обновляет список массивов в угловом шаблоне

Question

У меня есть 2D-массив в компонентном файле TS, и я привязываю его свойство в своем шаблоне.Когда я обновляю страницу, я получаю 0 индекса, и список отображается правильно, но когда я увеличиваю свою переменную в функции onVegetableDrop, она не переходит в массив к следующему индексу и не обновляет мой список, хотя в консолиЯ вижу, что переменная i увеличивается до 1.Почему так?

Код:

app.component.ts

export class AppComponent {

  title = 'angular-draganddrop';

  questions:string[] = ["what is nepal", "what is nepal2", "what is nepal3"];
  correctAns:string[] = ["Carrot", "Onion", "Potato", "Capsicum"];
  i:number = 0;
  score:number = 0;

  vegetables = [[
    {name: 'Carrot', type: 'vegetable'},
    {name: 'Onion', type: 'vegetable'},
    {name: 'Potato', type: 'vegetable'},
    {name: 'Capsicum', type: 'vegetable'}],
    [
  {name: 'Carrotas', type: 'vegetable'},
  {name: 'Onionas', type: 'vegetable'},
  {name: 'Potatoas', type: 'vegetable'},
  {name: 'Capsicumas', type: 'vegetable'}]]

  onVegetableDrop(e: DropEvent) {

    if(e.dragData.name == this.correctAns[this.i]) {
      console.log("correct");
      this.score++;
    }
    this.removeItem(e.dragData, this.vegetables);
    this.i++;
    console.log(this.i);
  }

app.component.html

<ng-container *ngFor="let item of [vegetables[this.i]]">
    <li
      *ngFor="let items of item"
      class="list-group-item list-group-item-action list-group-item-success"
      [draggable]
      [dragClass]="'active'"
      [dragTransitClass]="'active'"
      [dragData]="items"
      [dragScope]="items.type"
      [dragEnabled]="dragEnabled">
      {{items.name}}
    </li>
  </ng-container>