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

kinda看起来应该是

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

嵌套* ng用于修正错误的索引

1 个答案: