I am using *ngFor to display results from a data set but it is only displaying the first value in the set.

Here is my code

Data Set

[
  {
    "corporateId": "d0d506f5-a4c4-411a-ba06-a8a36387f824",
    "selectedMAP": [
      {
        "mapId": 4,
        "mapName": "medtest3",
        "active": true,
        "options": [
          {
            "optionId": 4,
            "optionName": "medoptiontest3",
            "optionPrice": 12345,
            "active": true
          }
        ]
      },
      {
        "mapId": 5,
        "mapName": "medtest4",
        "active": true,
        "options": [
          {
            "optionId": 5,
            "optionName": "medoptiontest4",
            "optionPrice": 12345,
            "active": true
          }
        ]
      }
    ]
  }
]

Get request

  getMedicalAid() {
      this.corporateBenefitsService.getMedicalAidProvider().subscribe((data) => {
            this.existingMedicalProviders = data;
      })
  }

HTML

  <div class="card mb-4" *ngFor="let medicalAid of existingMedicalProviders; let i = index;">
      <div class="row">
        <div class="col">
          <div class="input-container">
            <label for="provider">Provider</label>
            <input id="provider" [(ngModel)]="medicalAid.selectedMAP[i].mapName" type="text">
          </div>
        </div>
      </div>
  </div>

I currently only see the first mapName which is medtest3. Any ideas?

I am using *ngFor to display results from a data set but it is only displaying the first value in the set.

Here is my code

Data Set

[
  {
    "corporateId": "d0d506f5-a4c4-411a-ba06-a8a36387f824",
    "selectedMAP": [
      {
        "mapId": 4,
        "mapName": "medtest3",
        "active": true,
        "options": [
          {
            "optionId": 4,
            "optionName": "medoptiontest3",
            "optionPrice": 12345,
            "active": true
          }
        ]
      },
      {
        "mapId": 5,
        "mapName": "medtest4",
        "active": true,
        "options": [
          {
            "optionId": 5,
            "optionName": "medoptiontest4",
            "optionPrice": 12345,
            "active": true
          }
        ]
      }
    ]
  }
]

Get request

  getMedicalAid() {
      this.corporateBenefitsService.getMedicalAidProvider().subscribe((data) => {
            this.existingMedicalProviders = data;
      })
  }

HTML

  <div class="card mb-4" *ngFor="let medicalAid of existingMedicalProviders; let i = index;">
      <div class="row">
        <div class="col">
          <div class="input-container">
            <label for="provider">Provider</label>
            <input id="provider" [(ngModel)]="medicalAid.selectedMAP[i].mapName" type="text">
          </div>
        </div>
      </div>
  </div>

I currently only see the first mapName which is medtest3. Any ideas?

• javascript
• angular

5 Answers 5

Try it out:

<div
  *ngIf="existingMedicalProviders"
  class="card mb-4"
  *ngFor="let medicalAid of existingMedicalProviders[0].selectedMAP; let i = index;">
    <div class="row">
      <div class="col">
        <div class="input-container">
          <label for="provider">Provider</label>
          <input id="provider" [(ngModel)]="existingMedicalProviders[0].selectedMAP[i].mapName" type="text">
        </div>
      </div>
    </div>
</div>

Problem: your existingMedicalProviders is array and to get your selectedMAP array - you should at first get access to first item of existingMedicalProviders array and after that you can iterate through selectedMAP ;)

  <div class="card mb-4" *ngFor="let medicalAid of existingMedicalProviders?.selectedMAP; let i = index;">
      <div class="row">
        <div class="col">
          <div class="input-container">
            <label for="provider">Provider</label>
            <input id="provider" name="map{{i}}" [(ngModel)]="medicalAid.mapName" type="text">
          </div>
        </div>
      </div>
  </div>

existingMedicalProviders is an array with a single element.

You should be iterating over existingMedicalProviders.selectedMAP, like below:

Edit: You need to use index for [(ngModel)] More Info

<div class="card mb-4" *ngFor="let medicalAid of existingMedicalProviders.selectedMAP; let i = index;">
    <div class="row">
      <div class="col">
        <div class="input-container">
          <label for="provider">Provider</label>
          <input id="provider" [(ngModel)]="existingMedicalProviders.selectedMAP[i].mapName" type="text">
        </div>
      </div>
    </div>
</div>

As the others already mentioned your original data set only has a single object inside which does have an array as the property selectedMap.

Is this a correct assumption or did you by mistake present a "wrong" data set?

Additionally, your statement "I currently only see the first mapName which is medtest3. Any ideas?" makes sense with your provided code as your are using the following to bind the ngModel:

[(ngModel)]="medicalAid.selectedMAP[i].mapName"

As said before, you only have a single object in the data set thus the index is 0 (and only 0). Therefore you only see the first value.

To give more insight into your question, please also state where you are calling your method getMedicalAid(). Are you doing this from ngOnInit for example? Depending on this it could be that the application behaves differently.

Finally, try to hardcode something in your HTML like:

<p>{{existingMedicalProviders.selectedMAP[0].mapName}}</p>

Note: This is from one of your ments, except that I replaced [i] with [0].

To make it even simpler, you could follow an iterative approach and start with

<p>{{existingMedicalProviders | json }}</p>

which uses Angulars JSON pipe to parse the entire data set object that you assign inside your getMedicalAid() method.

Once that works, you can take selectedMAP next.

That's because you have only one item in your array. If you want to iterate the selectedMap then your HTML should be like this:

<ng-container *ngIf="!!existingMedicalProviders">    
    <div class="card mb-4" *ngFor="let item of existingMedicalProviders.selectedMAP">
        <div class="row">
          <div class="col">
            <div class="input-container">
              <label for="provider">Provider</label>
              <input id="provider" [(ngModel)]="item.mapName" type="text">
            </div>
          </div>
        </div>
    </div>
</ng-container>