尝试在 Angular 元素 webcomponent 中区分“[object Object]”时出错

Question

我将 Angular 组件导出为具有 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 Error: Error trying to diff '[object Object],[object Object],[object Object],[object Object],[object Object]'. Only arrays and iterables are allowed

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

Answer 1

在您的 HTML

中试试这个

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

Answer 2

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

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

然后字符串必须用 JSON.parse()

变成对象

尝试在 Angular 元素 webcomponent 中区分“[object Object]”时出错

Error trying to diff '[object Object]' in Angular Elements webcomponent

web-component

typescript

angular

angular-elements