模板文件中仅允许数组和迭代.异常行为

Question

在组件ts executecommand方法中，我正在制作像这样的

的已经存在的对象的克隆

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

之后，我正在循环浏览newCommandArray并对数据进行一些操纵。当我在克隆对象上操纵数据时，这是新的commandArray，也是原始对象数据，即this.commandArray[commandId]更改，使模板无法呈现视图。在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感到困惑。它想要循环循环，如果您没有将其转换为字符串！

，它会得到它。

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

在JavaScript中深克隆对象的最有效方法是什么？