Angular 模板文件中只允许使用数组和iterables。异常行为

在组件ts executeCommand方法中，我正在对已经存在的对象进行克隆，如下所示

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

之后，我在

数组上循环，并对数据进行一些操作。当我操作克隆对象上的数据时，该克隆对象是数组，而原始对象数据是
this.commandArray[commandId]
更改，这使得模板无法呈现视图。在
item.ParamProps.options
中，并给出错误信息：

尝试区分“[{\'name\'：\'option1\'，\'value\'：\'option1\'，{\'name\'：\'option2\'，\'value\'：\'option2\'”时出错。html第51行中只允许使用数组和ITerable，这是

如能帮助解决此问题，我们将不胜感激

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>

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



}


{{item.ParamName}}

{{option.name}

组件TS:

 <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>

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



}

导出类dynamicCommand组件实现OnInit{
公共命令：ICommandList；
公共消息：字符串；
公共命令数组：任意；
公共命令历史列表：任何；
公共筛选器项：字符串；
私有itemId:any；
@ViewChild（'commandHistoryModal'）commandHistoryModal:any；
构造函数（私有commandService:DynamicCommandService，私有globalDataService:globalDataService）{
this.commands=null；
this.commandArray={}；
this.commandHistoryList={}；
this.filterTerm=''；
}
公共ngOnInit（）{
this.itemId=Number（this.globalDataService.getAgentID（））；
this.commandService.getCommandsSet（this.itemId）.subscribe（（res:ICommandList）=>{
这个命令=res；
这是存储命令（res）；
this.loadAllCommandStatus（this.itemId）；
});
}
公共执行命令（命令ID:编号）{
this.commandService.getUserFeatures（）.subscribe（（res:any）=>{
this.commandArray[commandId].userID=res.userID；
设itemidaray=new Array（）；
itemidaray.push（this.itemId）；
this.commandArray[commandId].ItemId=itemIdArray；
this.commandArray[commandId].name=UUID.UUID（）；
让newCommandArray=newobject（）；
newCommandArray=this.commandArray[commandId]；
newCommandArray.CommandParamList[0].ParamProps.options=JSON.stringify（newCommandArray.CommandParamList[0].ParamProps.options）；
newCommandArray.CommandParamList.forEach（元素=>{
element.ParamProps.options=JSON.stringify（element.ParamProps.options）；
});
console.log（newCommandArray）；//输出=>[{\'name\'：\'option1\'，\'value\'：\'option1\'，{\'name\'：\'option2\'，\'value\'：\'option2\']
console.log（this.commandArray[commandId]）；//输出=>“[{\“name\”：\“option1\”，\“value\”：\“option1\”，{\“name\”：\“option2\”，\“value\”：“option2\”}”
this.commandService.executeCommand（newCommandArray.subscribe（）；
});
}
}
您的代码有一些问题

首先，在这些方面：

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

您实际上并不是在克隆对象。首先，
newCommandArray
被设置为一个空对象，
{}
，然后您继续说“实际上，忘了这一点。newCommandArray将指向
这个。commandArray[commandId]
。这就是为什么更改一个会更改另一个–两个变量名都指向同一个对象

如果要实际克隆对象，有很多种方法，每种方法都有优点和缺点，具体取决于要克隆对象的复杂性。有两种方法可以做到：

const newCommandArray = { ...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会感到困惑。它想要循环通过一个数组，如果你没有将它转换成字符串，它就会得到这个数组

如果您想了解有关克隆对象的更多信息，请查看此处：

JSON.stringify，正如您在ts返回字符串not Object中看到的，要克隆一个没有函数（或映射、设置等）的对象，请使用->clonedObject=JSON.parse（JSON.stringify（originalObject））这两个地方的字符串化都是由于后端问题造成的。但是如果我正确地进行克隆，它应该会解决问题。恐怕不会-当在模板中有item.ParamProps.options的
let选项时，它会失败，因为您将ParamProps.options转换为字符串，而ngFor需要一个数组。出于后端的目的，它会在后端而不是在客户端对选项进行字符串化是理想的选择。如果必须在客户端对其进行字符串化，请在新变量中执行（例如，ìtem.ParamProps.optionString`）然后告诉你的后端使用该变量，但将你的选项保留为数组。嗨，Michael，一旦我正确克隆了它，它就工作得很好。谢谢你的帮助，并标记为正确答案。非常感谢你的精彩解释啊，是的，当然，我很笨。通过事先克隆对象，你就不会严格化应用程序中使用的数组毕竟，克隆确实解决了这个问题。我很高兴@SelakaN成功了