时间戳

首页 > 解决方案 > 如果变量是数组、字符串、数字，则签入模板

javascript - 如果变量是数组、字符串、数字，则签入模板

问题描述

我在父 component.ts 文件中有一个如下所示的 items 数组

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 组件中使用这种类型检查的逻辑，因为我需要它是愚蠢的并且只显示传递给它的内容。

如何在渲染时从父组件本身解决这个问题。

请帮助。在此先感谢。

标签： javascriptangulartypescriptecmascript-6angular5

解决方案

您可以使用 anngIf检查 是否item.value具有长度属性。在父组件中，您仍然可以传递给子组件，在子组件中，您可以item.value根据它是数组还是数字来显示值

  1. 检查长度属性
   <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"
  1. 检查构造函数名称
value="item.value.constructor.name === "Array" ? item.value.length : item.value"

使用构造函数，还可以检查值是否为字符串、数字等。实时代码

推荐阅读