Question

我在parent 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

这里的标签将始终是文本，而值的类型可以是动态的（数字，字符串，数组）

因此，当值的类型为array时，我只需要显示数组的长度，例如在我们的例子中，组件应显示'Edges：3'，因为[10,20,30] .length为3。

我的目标不是在app-label-values组件中具有这种类型检查的逻辑，因为我需要使它笨拙并仅显示传递给它的内容。

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

请及时提供帮助。

Answer 1

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

检查长度属性

   <div *ngIf="item.value?.length > {{item.value.length}} </div>

如果要将数组的长度直接传递给子组件，可以考虑使用三元运算符

value="item.value?.length ? item.value.length : item.value"

如果要检查字符串值，请首先检查是否存在length属性。然后，可以使用+运算符来解析字符串。并使用第二个三元运算符，您可以检查它是数字还是数组

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

Answer 2

您可以使用if Else语句在带有角度4的模板上以及在病房上...

<div *ngFor ="let item of items">
    <app-label-values *ngIf="item.value.length >= 0; else elseIfTemp" label="item.text" value = "item.value.length"> </app-label-values>
    <app-label-values label="item.text" value = "item.value" #elseIfTemp> 
    </app-label-values>
</div>

Answer 3

您可以编写一个方法来检查类型并相应地返回

这是例子

<div *ngFor ="let item of items">
  <app-label-values
   label="item.text"
   value = "checkType(item.value)">
  </app-label-values>
</div>

和.ts文件中

checkType(value){
  if(typeof value === 'object'){
    return value.length;
  }else{
    return value;
  }
}

here's是一个例子

检查模板变量是否为数组，字符串，数字

3 个答案: