Use *ngFor and [(ngModel)] to change an array of objects with a Map

Question

I have an class with an array of objects:

export class MyObject {
  sections: Section[]
}

The Section class contains a Map:

export class Section {
  dataPoints: Map<string, string>
}

I want to present an object of class MyObject to the user of the frontend and let the user change its content. I have a problem in the HTML code for the component for that:

<ul>
  <li *ngFor="let section of this.myObject; index as sectionsIndex">
    <ul>
      <li *ngFor="let dataPoint of section.dataPoints | keyvalue">
        <mat-form-field appearance="fill">
          <mat-label>Label:</mat-label>
          <input matInput placeholder="Label input field placeholder"
              [(ngModel)]="this.myObject.sections[sectionsIndex].dataPoints[dataPoint.key]">
        </mat-form-field>

        <mat-form-field appearance="fill">
          <mat-label>Content:</mat-label>
          <input matInput placeholder="Content input field placeholder"
              [(ngModel)]="this.myObject.sections[sectionsIndex].dataPoints[dataPoint.value]">
        </mat-form-field>
      </li>
    </ul>
  </li>
</ul>

Without the keyvalue pipe I get this error in the console: "Error: NG02200: Cannot find a differ supporting object '[object Map]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?".

I followed How to iterate using ngFor loop Map containing key as string and values as map iteration which brought me to the keyvalue pipe, but accessing the original object via [(ngModel)]="this.myObject.sections[sectionsIndex].dataPoints[dataPoint.key]" results in a compiler error "Element implicitly has an 'any' type because type 'Map<string, string>' has no index signature. Did you mean to call 'get'?" as well as the same error message with "Did you mean to call 'set'?" at the end.

The user should be able to change the content of the dataPoints Map in Sections as well as other class variables of MyObject which I didn't mention in the code example, as well as add and remove Sections from the array and add and remove elements from the Map dataPoints by using add / remove buttons that I left out in the code as well to concentrate on the problem.

What is best practice to deal with the problem of changing an array of objects with a Map? What leads to the error in my code?

Did you mean to call 'get'? `.dataPoints.get(dataPoint.key)` — Roberto Zvjerković, Nov 23 '22 at 18:47
@RobertoZvjerković OK, but for bidirectional binding I would need the corresponding .set() method at the same time if I'm not mistaken. I don't know how to solve this problem. — waldrabe, Nov 23 '22 at 19:03

Rick · Answer 1 · 2022-11-26T17:33:12.967

2

hard for me to tell exactly what you are trying to do, but a couple of things to think about:

Don't use 'this.' in your html. leave that off.
It doesn't make sense to write this.myObject.sections[sectionsIndex] because you already have access to that object by simply using: section
did you possibly simply mean this: [(ngModel)]="dataPoint"

edited Nov 26 '22 at 17:33

answered Nov 23 '22 at 19:52

Rick

1,710
8
17

It seems that `[(ngModel)]="dataPoint"` does not update the map `dataPoints` if `dataPoint` is derived from `dataPoint` via `*ngFor="let dataPoint of section.dataPoints` as `dataPoint` is a copy and not a reference to the corresponding map entry. So I seem to have to use the long expression `[(ngModel)]="myObject.sections[sectionsIndex].dataPoints[dataPoint.value]"`. – waldrabe Nov 28 '22 at 12:56

score 1 · Answer 2 · answered Nov 24 '22 at 01:29

I found the solution with the help of Rick's answer. The keyvalue pipe is still necessary:

<ul>
  <li *ngFor="let section of this.myObject; index as sectionsIndex">
    <ul>
      <li *ngFor="let dataPoint of section.dataPoints | keyvalue">
        <mat-form-field appearance="fill">
          <mat-label>Label:</mat-label>
          <input matInput placeholder="Label input field placeholder"
              [(ngModel)]="dataPoint.key">
        </mat-form-field>

        <mat-form-field appearance="fill">
          <mat-label>Content:</mat-label>
          <input matInput placeholder="Content input field placeholder"
              [(ngModel)]="dataPoint.value">
        </mat-form-field>
      </li>
    </ul>
  </li>
</ul>

Chris Hamilton · Answer 3 · 2022-11-23T20:50:24.370

It's a bit tricky because the values are primitive values (strings), so they are not passed to you by reference through the key value pipe. That means that updating the value will have no effect on the actual map. However, you can simply use (ngModelChange) to customize what happens when the value changes. Remove the round brackets from ngModel so that values are only passed in to the input from the key value pipe.

If the values were objects you could use two way binding [(ngModel)] with one of their properties, since you would have a reference to said object.

Note you also need a custom track by function here, or else Angular will rerender the input on each value change, causing the user to lose focus on the input.

Stackblitz: https://stackblitz.com/edit/angular-ivy-ejgn4p?file=src/app/app.component.html

<ul>
  <li *ngFor="let section of this.myObject.sections">
    <ul>
      <li *ngFor="let dataPoint of section.dataPoints | keyvalue; trackBy: trackByKey">
        <label>{{dataPoint.key}}
        <input
          [ngModel]="dataPoint.value"
          (ngModelChange)="section.dataPoints.set(dataPoint.key, $event)"
        />
        </label>
      </li>
    </ul>
  </li>
</ul>

export class AppComponent {
  myObject: MyObject = {
    sections: [
      {
        dataPoints: new Map([
          ['k11', 'v11'],
          ['k12', 'v12'],
          ['k13', 'v13'],
        ]),
      },
      {
        dataPoints: new Map([
          ['k21', 'v21'],
          ['k22', 'v22'],
          ['k23', 'v23'],
        ]),
      },
    ],
  };

  trackByKey(i: number, d: { key: string; value: string }) {
    return d.key;
  }
}

Use *ngFor and [(ngModel)] to change an array of objects with a Map

3 Answers3