Angular 尝试区分'时出错；[对象对象]'；角元素中的网络组件

我将角度组件导出为带有角度元素的框架不可知元素

角度组件接受“步数”数组

该组件用于角度测量，如下所示：

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

<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页面中使用它，如下所示：

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

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

$（文档）.ready（函数（）{
变量步骤=[
{标签：“步骤A”}，
{标签：“步骤B”}，
{标签：“步骤C”}，
{标签：“步骤D”}，
{标签：“步骤E”}
];
$（“#向导”）.attr（“步骤”，步骤）；
});

这给了我一个错误：

错误：尝试区分“[对象对象]，[对象对象]，[对象对象对象]，[对象对象]，[对象对象]”时出错。只允许使用数组和iterables

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

在HTML中试试这个

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

{{step.label}

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

---

然后字符串必须通过

JSON.parse（）

@Tschareck转换为object，这个答案是正确的，所以将这个答案应用到您的应用程序中。下面的链接为您提供了一个stackblitz环境，在这里解决方案可以正常工作@tschareck，你能把这个答案标记为接受吗？它会帮助很多人