如何解决尝试在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()
将字符串转换为对象
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。