Creating new objects for select dropdowns in Angular

Question

This is a simplified version of my problem, as my model is much bigger.

I'm generating a drop-down from a set of objects, and using the object.Name property of each to fill the select.

<md-select [(ngModel)]="selectedDetachment" placeholder="Select a detachment">
    <md-option *ngFor="let option of detachmentOptions" [value]="option">
        {{option.Name}}
    </md-option>
</md-select>

the detachmentOptions object is a generated set of 3 objects, all of which extend Detachment,

private detachmentOptions: Detachment[];

this.detachmentOptions = [
    new DetachmentPatrol(),
    new DetachmentBattalion(),
    new DetachmentBrigade()
];

I want to add a detachment to my main army, based on the select, which uses the following function

addDetachment() {
    if(this.selectedDetachment) {
        this.army.Detachments.push(this.selectedDetachment.constructor());
        // this.makeDetachmentOptions();
    }
}

My problem is that this uses the orignal, as JS inherantly passes by reference. No matter how many copies of DetachmentBattaliion I add, they all contain the same contents, as they are each references to the original created in the constructor.

I need to be able to create a brand-new blank object of the type selected, and I'm completely blanking on how to do this.

Object.prototype() gets the prototype, so I can't get the type, and I can't find a way to use typeof to genearate a new copy of the object.

It does not need to copy the object wholesale, I just need a method of creating the original type, without tying them together by reference.

shevaroller · Accepted Answer · 2017-09-28 18:57:23Z

1

You can use lodash's cloneDeep. It creates a new object instance instead of referencing the same object.

import { cloneDeep } from 'lodash';

...

export class ... {
  private detachmentOptions: Detachment[];

  ...


  addDetachment() {
    if(this.selectedDetachment) {
      const selectedDetachment = cloneDeep(this.selectedDetachment);
      this.army.Detachments.push(selectedDetachment.constructor());
      // this.makeDetachmentOptions();
    }
  }
}

answered Sep 28, 2017 at 18:57

shevaroller

1037 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KilleR Over a year ago

This worked a tread, although my IDE isn't recognising the package; it is still funtioning fine

shevaroller Over a year ago

@KilleR I had this issue on VSCode a few times. Sometimes relaunching the IDE helps. You may also try changing the order of imports.

Madhu Ranjan · Accepted Answer · 2020-08-31 18:37:32Z

0

you may try below,

 addDetachment() {
    if(this.selectedDetachment) {
      const prototype = Object.getPrototypeOf(this.selectedDetachment);
      const instance = Object.create(prototype);
      this.army.Detachments.push(instance);
      console.log(instance);
      console.log(this.army);
    }
  }

Check this Plunker!!

edited Aug 31, 2020 at 18:37

answered Sep 28, 2017 at 19:15

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

1 Comment

KilleR Over a year ago

Unfortunately, this does not work, they are a subtype of Detachment, and getPrototypeOf just gives the higher prototype class.

Collectives™ on Stack Overflow

Creating new objects for select dropdowns in Angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related