如何从 index.html 自定义元素标签接收数组作为@Input？

Posted 2023-02-22

【中文标题】如何从 index.html 自定义元素标签接收数组作为@Input？

【英文标题】：How to receive an array as @Input from index.html custom element tag?

【发布时间】：2021-12-12 09:01:24

【问题描述】：

我创建了一个 angular 的自定义元素。元素标签如下图：

     <test-reco userId="I8763" [productId]="['101','B102']"> </test-reco>

我在 index.html 中调用它。现在，它有两个输入，一个是字符串类型的 userId，另一个是 productId 数组。我在我的组件中收到这些作为输入，如下所示：

    export class test implements OnInit 
       @Input() userid = '';
       @Input() productid: any[];
    

在我的组件内部，productId 未定义。谁能告诉我我做错了什么？ 我也试过这样传递：

productId="['101','B102']"

但在这种情况下，它以字符串而不是数组的形式出现。

【问题讨论】：

使用userid和[productid]，因为您的测试组件应该接收名称为userid、productid的输入参数。

嗨永顺，不，这不是你的建议。

检查这个demo。确保您的输入参数名称与 Component 中的内容匹配。

嗨@YongShun，感谢演示。我尝试了你的建议。使 index.html 和组件中的名称相同，而不是驼峰式。我能够获得用户 ID，但 productid 数组仍然未定义:(

嗨@YongShun 在同一个演示中，您可以尝试在 index.html 中调用您的元素并检查它是否有效，因为对我来说它没有

【参考方案1】：

你可以用 (",") 来展开它 Substr 1 和 -1 用于删除 [ 和 ]

【参考方案2】：

您的姓名应与下面给出的相同。

<test-reco [userId]="I8763" [productId]="['101','B102']"> </test-reco>

export class test implements OnInit 
       @Input() userId= '';
       @Input() productId: any[];
    

【讨论】：

嗨，萨加尔，谢谢您的回复。我尝试了你的建议，它仍然是 undefined 。我认为是因为当我们从一个组件传递到另一个组件时，您所建议的保留商品，但如果 index.html 是一个普通的 html 文件，它是未定义的，并且组件无法接收它。一种方法是发送字符串并在组件中解析它，但这不是我正在寻找的

嘿@RiteshSingh，你能在stackblitz上分享你的代码吗，这样我就可以知道你遇到了什么问题。