尝试在 Angular Elements webcomponent 中区分“[object Object]”时出错答案

【问题标题】：Error trying to diff '[object Object]' in Angular Elements webcomponent尝试在 Angular Elements webcomponent 中区分“[object Object]”时出错
【发布时间】：2021-01-04 04:24:55
【问题描述】：

我使用 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>

这给了我错误：

ERROR 错误：尝试区分“[object Object]、[object Object]、[object Object]、[object Object]、[object Object]”时出错。只允许使用数组和可迭代对象

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

【问题讨论】：

标签： angular typescript web-component angular-elements

【解决方案1】：

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

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

那么字符串必须用JSON.parse()变成对象

【讨论】：

【解决方案2】：

在你的 HTML 中试试这个

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

【讨论】：

@Tschareck，这个答案是正确的，所以将此答案应用于您的应用程序。下面的链接让您可以访问一个 stackblitz 环境，其中解决方案工作正常。 angular-questions-63935272.stackblitz.io
@tschareck ，您能否将此答案标记为已接受？它会帮助很多人