尝试在Angular Elements WebComponent中差异'[object Object]'时出错

问题描述

我使用Angular Elements将Angular组件导出为框架不可知元素。

Angular组件接受“步骤”数组

export class FormWizardComponent {
@input() public steps: any[] = new Array<any>();
}

步骤：

steps = [{ label: 'Step A' },{ label: 'Step B' },{ label: 'Step C' },{ label: 'Step D' },{ label: 'Step E' }];

该组件在Angular中的用法如下：

<app-form-wizard [steps]="steps">
</app-form-wizard>

现在，此元素已导出，构建，我想在纯HTML页面中使用它，如下所示：

<script>
  $(document).ready(function() {
    var steps = [
      { label: "Step A" },{ label: "Step B" },{ label: "Step C" },{ label: "Step D" },{ label: "Step E" }
    ];

    $("#wizard").attr("steps",steps);
  });
</script>

<form-wizard-element id="wizard"> </form-wizard-element>

这给了我错误：

错误错误：尝试区分'[对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]'时出错。仅允许数组和可迭代对象

我应该如何将数据传递给组件？

解决方法

在您的HTML中尝试

<div *ngFor="let step of steps">
    {{step.label}}
</div>

,

Web组件不接受对象作为输入。输入应为字符串：

<form-wizard steps='[{"label":"Step A" },{"label":"Step B" },{"label":"Step C" },{"label":"Step D"},{"label":"Step E"}]'>
</form-wizard>

然后必须使用JSON.parse()将字符串转换为对象