增量变量不会更新角度模板中的数组列表

Question

我在组件TS文件中有一个2D数组，并且将其绑定到模板中。当我刷新页面时，索引为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>