How to access key and value of object (with reference) using *ngFor?

Question

I ran into a serious problem how to get Key and Value of JSON object using *ngFor and found an excellent solution here (incase this question gets marked as duplicate).

I used Pipes, however the solution seems quite inefficient as it generates the collection every time the change detector checks for changes. Ignoring the complexity and using this solution, still the problem is not solved as it iterates over the new array returned from component.

How can I used this solution to manipulate the original object?

Business Requirement: Keeping the Key/Value pair unbounded and allow the user to change them both on the frontend.

Below is the code snippet:

<tr *ngFor="let properties of matrixProperties">
    <button (click)="addNewProperty(properties)">Add New Property</button>
    <div *ngFor="let property of properties | keys">
        <td>
            <inline-editor type="textarea" [(ngModel)]="property.key"></inline-editor>
        </td>
        <td>
            <inline-editor type="textarea" [(ngModel)]="property.value"></inline-editor>
        </td>
    </div>
</tr>

addNewProperty(properties) {
  properties.id = 4;
  properties['key'] = "value";   //adding new key/value pair
}

score 0 · Answer 1 · answered Feb 20 '18 at 10:48

<div *ngFor="let property of properties | keys"> In properties you will be getting array of objects .

for (const prop in this.properties) {
          if (this.properties.hasOwnProperty(prop)) {
            this.ResultData.push(prop);
          }
        }

In ResultData array only keys will be there map ResultData to ngFor you will get only keys

How to access key and value of object (with reference) using *ngFor?

1 Answers1