我在父 component.ts 文件中有一个项目数组,如下所示
items = [
{text: 'Length' , value: 10 },
{text : 'Degree' , value : "108"},
{text : 'Edges' , value : [10,20,30]}
]
然后我将一个名为 app-label-values 的组件放置在父组件的 *ngFor 循环中,如下所示
<div *ngFor ="let item of items">
<app-label-values
label="item.text"
value = "item.value">
</app-label-values>
</div>
app-label-values 组件目的是显示标签和标签对应的值。
例如。年龄:10 岁
这里的标签总是文本,而值的类型可以是动态的(数字、字符串、数组)
所以当值是数组类型时,我只需要显示数组的长度,就像在我们的例子中,组件应该显示 'Edges : 3' 因为 [10,20,30].length 是 3。
我的目标不是在 app-label-values 组件中有这种类型检查逻辑,因为我需要它是愚蠢的并且只显示传递给它的内容。
如何在渲染时从父组件本身解决这个问题。
请帮助。提前致谢。
最佳答案
您可以使用 ngIf
来检查 item.value
是否具有 length 属性。
在父组件中,您仍然可以将 item.value
传递给子组件,并在子组件中显示该值,具体取决于它是数组还是数字
- 检查长度属性
<div *ngIf="item.value?.length > {{item.value.length}} </div>
如果你想直接将数组的长度传递给你的子组件,你可以考虑使用三元运算符
value="item.value?.length ? item.value.length : item.value"
如果要检查字符串值,首先检查是否有长度属性。然后可以使用 +
运算符来解析字符串。使用第二个三元运算符,您可以检查它是数字还是数组
value="item.value?.length ? +item.value ? item.value : item.value.length : item.value"
- 检查构造函数名称
value="item.value.constructor.name === "Array" ? item.value.length : item.value"
使用构造函数,还可以检查值是否为字符串、数字等。live code
关于javascript - 如果变量是数组、字符串、数字,则检查模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51759433/