angular - 模板文件中只允许数组和可迭代对象。异常行为

Question

在组件 ts executeCommand 方法中，我正在像这样克隆一个已经存在的对象

let newCommandArray = new Object();
      newCommandArray = this.commandArray[commandId];

之后我将遍历 newCommandArray并对数据进行一些操作。当我操作作为 newCommandArray 的克隆对象上的数据时，还有原始对象数据，即 this.commandArray[commandId]。使模板无法呈现 View 的更改。在 item.ParamProps.options并给我错误:

Error trying to diff '"[{\"name\":\"option1\",\"value\":\"option1\"},{\"name\":\"option2\",\"value\":\"option2\"}]"'. Only arrays and iterables are allowed在 html 第 51 行中是 <md2-option *ngFor="let option of item.ParamProps.options">

我们将不胜感激。

HTML 模板:

 <div *ngSwitchCase="'select'">
                  <div class="form-group" *ngIf="item.ParamProps.visible">
                    <label>{{item.ParamName}}</label><br>
                    <div class="wrapper">
                      <md2-select [(ngModel)]="item.ParamValue"
                                  [name]="item.ParamID">
                        <md2-option *ngFor="let option of item.ParamProps.options"
                                    [value]="option.value">{{option.name}}
                        </md2-option>
                      </md2-select>
                      <i class="bar"></i>
                    </div>
                  </div>
                </div>

组件 TS:

export class DynamicCommandComponent implements OnInit {
  public commands: ICommandList;
  public message: string;
  public commandArray: any;
  public commandHistoryList: any;
  public filterTerm: string;
  private itemId: any;
  @ViewChild('commandHistoryModal') commandHistoryModal: any;

  constructor(private commandService: DynamicCommandService, private globalDataService: GlobalDataService) {
    this.commands = null;
    this.commandArray = {};
    this.commandHistoryList = {};
    this.filterTerm = '';
  }

  public ngOnInit() {
    this.itemId = Number(this.globalDataService.getAgentID());
    this.commandService.getCommandsSet(this.itemId).subscribe((res: ICommandList) => {
      this.commands = res;
      this.storeCommands(res);
      this.loadAllCommandStatus(this.itemId);

    });
  }


  public executeCommand(commandId: number) {
    this.commandService.getUserFeatures().subscribe((res: any) => {
      this.commandArray[commandId].userID = res.userId;
      let itemIdArray = new Array<number>();
      itemIdArray.push(this.itemId);
      this.commandArray[commandId].ItemIDs = itemIdArray;
      this.commandArray[commandId].name = UUID.UUID();
      let newCommandArray = new Object();
      newCommandArray = this.commandArray[commandId];
      newCommandArray.CommandParamList[0].ParamProps.options = JSON.stringify(newCommandArray.CommandParamList[0].ParamProps.options);
      newCommandArray.CommandParamList.forEach(element => {
        element.ParamProps.options = JSON.stringify(element.ParamProps.options);
      });
      console.log(newCommandArray); // Output => [{\"name\":\"option1\",\"value\":\"option1\"},{\"name\":\"option2\",\"value\":\"option2\"}]"

      console.log(this.commandArray[commandId]); // Output => "[{\"name\":\"option1\",\"value\":\"option1\"},{\"name\":\"option2\",\"value\":\"option2\"}]"

      this.commandService.executeCommand(newCommandArray).subscribe();
    });
  }



}

Answer 1

您的代码有一些问题。

首先，在这些行中:

let newCommandArray = new Object();
newCommandArray = this.commandArray[commandId];

您实际上并没有克隆该对象。首先 newCommandArray 设置为一个空对象 {} 但随后您继续说“实际上，忘了那个吧。 NewCommandArray 将指向 this.commandArray[commandId]。这就是为什么改变一个会改变另一个——两个变量名都指向同一个对象。

如果您想实际克隆对象，有很多方法，每种方法各有利弊，具体取决于您要克隆的对象的复杂程度。您可以通过两种方式做到这一点:

const newCommandArray = { ...this.commandArray[commandId] };

或

const newCommandArray = JSON.parse(JSON.stringify(this.commandArray[commandID]));

顺便说一下，我使用的是 const，因为一旦您分配了该对象，您就不想将该变量重新分配给另一个对象。您可以愉快地添加或更改其属性，而不会导致任何有关使用 const 的错误。

然后在那之后，有两个地方你无缘无故地把东西串起来

newCommandArray.CommandParamList[0].ParamProps.options = JSON.stringify(newCommandArray.CommandParamList[0].ParamProps.options);
...
newCommandArray.CommandParamList.forEach(element => {
  element.ParamProps.options = JSON.stringify(element.ParamProps.options);
});

为什么要对这些选项进行字符串化？无论如何，这就是为什么你会遇到另一个问题，ngFor 会感到困惑。它想要遍历一个数组，如果您没有将它转换成字符串，它就会得到这个数组!

如果您想了解更多关于克隆对象的信息，请看这里:

What is the most efficient way to deep clone an object in JavaScript?