javascript - 绑定数据时出现Angular Elements Web Component错误
问题描述
我正在玩 Angular Elements，看看我是否可以使用现有的 Angular 组件创建一个 Web 组件，以便我可以在不同的框架之间共享该组件。我使用 Angular Elements 创建了一个简单的 Web 组件，它应该将对象数组作为输入并显示类似列表的内容。我能够编译，但是当我将它连接到简单的 HTML 页面时，我收到以下错误：
ERROR 错误：“尝试区分 '[object Object]、[object Object]、[object Object]' 时出错。只允许使用数组和可迭代对象”
我的页面如下所示：
<head>
<title>Angular Element Component in HTML</title>
</head>
<body>
<base href=".">
<script src="elements/myCustomElements.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="elements/styles.css">
<app-my-custom-element>
</app-my-custom-element>
<script type="text/javascript">
let testData = [
{
name: 'Test Name 1',
value: 'test1'
},
{
name: 'Test Name 2',
value: 'test 2'
},
{
name: 'Test Name 3',
value: 'test 3'
}];
const appMyCustomElement = document.getElementsByTagName('app-my-custom-element');
if(appMyCustomElement.length>0){
const target = appMyCustomElement[0];
target.setAttribute('users', testData);
target.addEventListener('search', (e) => testData.push({
name: e,
value: 'test'
}));
}
</script>
</body>
</html>
是否有任何简单的方法可以向 Angular Elements 组件指示这是一个数组？
澄清：我在这里插入的代码不是 Angular 而是纯 HTML。我在 Angular 中有一个单独的应用程序，它被“编译”为Angular Elements webcomponent。在“编译”过程之后，我最终会得到 2 个文件：myCustomElement.js 和 styles.css。现在可以在用 React、Vue 甚至纯 HTML 编写的完全随机的应用程序中引用这些文件。您看到的代码是一个纯 HTML 页面，它试图使用我的 webcomponent
我现在不喜欢的解决方案： 在设置属性时填充 HTML 页面，将其作为 json 传递：
<html>
<head>
<title>Angular Element Component in HTML</title>
</head>
<body>
<base href=".">
<script src="elements/myCustomElements.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="elements/styles.css">
<app-my-custom-element>
</app-my-custom-element>
<script type="text/javascript">
let testData = [
{
name: 'Test Name 1',
value: 'test1'
},
{
name: 'Test Name 2',
value: 'test 2'
},
{
name: 'Test Name 3',
value: 'test 3'
}];
const appMyCustomElement = document.getElementsByTagName('app-my-custom-element');
if(appMyCustomElement.length>0){
const target = appMyCustomElement[0];
target.setAttribute('users', JSON.stringify(testData));
target.addEventListener('search', (e) => {
let currentData = JSON.parse(target.getAttribute('users'));
currentData.push({
name: e.detail,
value: 'test'
});
target.setAttribute('users', JSON.stringify(currentData));
}
</script>
</body>
</html>
在 Angular 应用程序中，我必须将 json 转换为对象，例如：
convertedUsers: IUserInfo[] = [];
@Input() set users(value: string) {
console.warn(value);
this.convertedUsers = JSON.parse(value) as IUserInfo[];
}
get users(): string {
return JSON.stringify(this.convertedUsers);
}
@Output() search = new EventEmitter<string>();