Вложенный * ng для некорректных индексов

Question

Я получаю неправильные индексы в моем *ngFor. По сути, последние индексы в массиве ниже возвращаются неправильно. Например, option 2 возвращается с индексами 1 и 0, когда оно должно быть 0 и 1. Любые другие объекты в массиве возвращаются нормально. Это только последние объекты в каждом массиве. В этом примере проблема с option 2 и option c

Вот массив

[
  {
    "corporateId": "be67e184-a663-439c-b841-c14a734011eb",
    "selectedMAP": [
      {
        "mapId": 81,
        "mapName": "prov 1",
        "active": true,
        "options": [
          {
            "optionId": 123,
            "optionName": "option 1",
            "memberAmount": 1000,
            "adultDependantAmount": 500,
            "childDependantAmount": 500,
            "active": true
          },
          {
            "optionId": 124,
            "optionName": "option 2",
            "memberAmount": 2000,
            "adultDependantAmount": 1500,
            "childDependantAmount": 500,
            "active": true
          }
        ]
      },
      {
        "mapId": 82,
        "mapName": "Prov 2",
        "active": true,
        "options": [
          {
            "optionId": 125,
            "optionName": "option a",
            "memberAmount": 500,
            "adultDependantAmount": 250,
            "childDependantAmount": 250,
            "active": true
          },
          {
            "optionId": 126,
            "optionName": "option b",
            "memberAmount": 1000,
            "adultDependantAmount": 500,
            "childDependantAmount": 500,
            "active": true
          },
          {
            "optionId": 127,
            "optionName": "option c",
            "memberAmount": 2000,
            "adultDependantAmount": 1000,
            "childDependantAmount": 1000,
            "active": true
          }
        ]
      }
    ]
  }
]

HTML

<div id="medicalCard" class="card mb-4 medicalCard" *ngFor="let provider of companyMedicalAidProvider[0].selectedMAP; let i = index;">
    <button class="close float-right" (click)="removeMedicalProvider(i)">X</button>
    <div class="card-body">
        <h4>Company medical aid provider</h4>
        <div class="row">
            <div class="col-12">
                <div class="input-container">
                    <label for="provider">Provider</label>
                    <input id="provider" [(ngModel)]="companyMedicalAidProvider[0].selectedMAP[i].mapName" type="text">
                </div>
            </div>
        </div>
        <h4>Available option</h4>
        <div id="option" class="row option" *ngFor="let providerOptions of companyMedicalAidProvider[0].selectedMAP[i].options; let j = index;">
            <div class="col-7">
                <div class="input-container">
                    <label for="provider">Option name</label>
                    <input id="provider" [(ngModel)]="companyMedicalAidProvider[0].selectedMAP[i].options[j].optionName" type="text">
                </div>
                <div class="input-container">
                    <label for="provider">Member amount</label>
                    <input id="provider" [(ngModel)]="companyMedicalAidProvider[0].selectedMAP[i].options[j].memberAmount" type="number" placeholder="R"><span><button class="close ml-1"
                (click)="removeOption(j,i)">X</button></span>
                </div>
            </div>
        </div>
    </div>
</div>

Я получаю индексы обратно когда я нажимаю на кнопку removeOption(j,i).

TS

removeOption(index: number, indexOption: number) {
  console.log(index, indexOption);
}

Есть идеи, почему это происходит?

Answer 1

вроде как должно быть

(click)="removeOption(i,j)"