html - 在 Angular 中为选择下拉菜单创建新对象

Question

这是我的问题的简化版本，因为我的模型要大得多。

我从一组对象生成一个下拉列表，并使用每个对象的 object.Name 属性来填充选择。

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

detachmentOptions 对象是一组生成的 3 个对象，所有这些对象都扩展了 Detachment，

private detachmentOptions: Detachment[];

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

我想在我的主力部队中添加一个支队，基于选择，它使用以下函数

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

我的问题是这使用了原始的，因为 JS 继承地通过引用传递。无论我添加多少份 DetachmentBattaliion，它们都包含相同的内容，因为它们都是对在构造函数中创建的原始内容的引用。

我需要能够创建所选类型的全新空白对象，但我完全不知道如何执行此操作。

Object.prototype()获取原型(prototype)，所以无法获取类型，也找不到使用typeof生成新的方法对象的副本。

它不需要批量复制对象，我只需要一种创建原始类型的方法，而不需要通过引用将它们捆绑在一起。

Answer 1

您可以使用 lodash 的 cloneDeep。它创建一个新的对象实例，而不是引用同一个对象。

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();
    }
  }
}