最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Check in template if variable is an array, string, number - Stack Overflow

programmeradmin2浏览0评论

I have a items array as shown below inside parent ponent.ts file

items = [
    {text: 'Length' , value: 10 },
    {text : 'Degree' , value : "108"},
    {text : 'Edges' , value : [10,20,30]}
]

Then I have a ponent named app-label-values placed inside a *ngFor Loop in parent ponent like show below

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

app-label-values ponent purpose is to display label and value corresponding to the label.

For eg. Age : 10

The label here will always be a text while the type of value can be dynamic ( number, strings, arrays)

So when the value is of type array I need to show only the length of the array ,like in our case the ponent should display 'Edges : 3' since [10,20,30].length is 3.

My aim is not to have this logic of type checking in the app-label-values ponent as I need it to be dumb and display only what is passed to it.

How can I solve this from parent ponent itself while rendering.

Kindly help.Thanks in advance.

I have a items array as shown below inside parent ponent.ts file

items = [
    {text: 'Length' , value: 10 },
    {text : 'Degree' , value : "108"},
    {text : 'Edges' , value : [10,20,30]}
]

Then I have a ponent named app-label-values placed inside a *ngFor Loop in parent ponent like show below

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

app-label-values ponent purpose is to display label and value corresponding to the label.

For eg. Age : 10

The label here will always be a text while the type of value can be dynamic ( number, strings, arrays)

So when the value is of type array I need to show only the length of the array ,like in our case the ponent should display 'Edges : 3' since [10,20,30].length is 3.

My aim is not to have this logic of type checking in the app-label-values ponent as I need it to be dumb and display only what is passed to it.

How can I solve this from parent ponent itself while rendering.

Kindly help.Thanks in advance.

Share Improve this question edited Aug 9, 2018 at 7:40 edkeveked 18.4k10 gold badges59 silver badges95 bronze badges asked Aug 9, 2018 at 5:30 Shijil NarayananShijil Narayanan 1,01910 silver badges21 bronze badges 5
  • value = "item.value.length" ?? – Muhammad Usman Commented Aug 9, 2018 at 5:33
  • @GeorgeBailey That wont work as for number type values , value.length will throw and error and even though I convert number to string and apply length on it it will give me undesired result. eg. '10'.length = 2 – Shijil Narayanan Commented Aug 9, 2018 at 5:39
  • Ok. I didn't really try this but you can check with value = "item.value.constructor == Array ? item.value.length : item.value" – Muhammad Usman Commented Aug 9, 2018 at 5:49
  • Thanks George, constructor check appears to be a cleaner approach to me.Thanks :) – Shijil Narayanan Commented Aug 9, 2018 at 6:06
  • value = "item.value.push ? item.value.length : item.value".I did this and it works in the template as well, as push method only belongs to array prototype.However I hope i get a better solution than this. – Shijil Narayanan Commented Aug 9, 2018 at 7:09
Add a ment  | 

3 Answers 3

Reset to default 7

You can use an ngIf to check if the item.value has a length property. In the parent ponent,you can still pass to the child item.value and in the child ponent you display the value depending on the fact that it is an array or a number

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

If you want to pass directly the length of array to your child ponent, you can consider using a ternary operator

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

If you want to check for string value, you first check if there is a length property. Then one can use the + operator to parse the string. And with a second ternary operator, you can check if that is a number or an array

value="item.value?.length ? +item.value ? item.value : item.value.length : item.value" 
  1. check constructor name
value="item.value.constructor.name === "Array" ? item.value.length : item.value"

Using the constructor, one can check also if the value is a string, number, etc.. live code

You can use if Else statement in the template with angular 4 and on wards...

<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>

You can write a method who will cehck the type and return accordingly

here's is example

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

and in .ts file

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

here's is an example

发布评论

评论列表(0)

  1. 暂无评论