5

I need to assign two variable in for. Something like this in Angular 5+ 

<div *ngFor="let a of apple, let b of ball">
  <a [routerLink]="['/ball',b]">
    {{a}}
  </a>
</div>

Any suggestions please?

Advance thanks for your help.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
dev
  • 403
  • 2
  • 5
  • 11
  • Ok I will clearly explain it to you I want to add the array one by one May be with push array with structure like danday74's example and store it in local storage and retrieve it and add one more and again store it. And I what to use it different place in the project.Is there any way to do it. – dev Oct 04 '18 at 03:09

3 Answers3

4

It appears that your arrays are the same length, i.e., Parallel Arrays. You should avoid nesting ngFor.

You can use the index of one array, to look into the other:

<div *ngFor="let a of apple; let i = index">
    <a [routerLink]="['/ball', ball[i]]">{{a}}</a>
</div>
Rafael
  • 7,605
  • 13
  • 31
  • 46
  • Interesting... Anyway, you should really convert your structure to an array of structures... – Rafael Oct 04 '18 at 02:41
2

It is much more natural, instead of using two arrays, to organise your data as an array of objects like so:

this.things = [
  {
    apple: 'apple1',
    ball: 'ball1'
  },
  {
    apple: 'apple2',
    ball: 'ball2'
  }
]

You can then iterate over this array like so:

<div *ngFor="let thing of things">
  <a [routerLink]="['/ball', thing.ball]">
    {{ thing.apple }}
  </a>
</div>

This is also far more readable and standard practice.

danday74
  • 52,471
  • 49
  • 232
  • 283
  • 1
    Great Solution! – Smokey Dawson Oct 04 '18 at 01:40
  • 1
    cool thank you. But is possible to store in localstorage and retrieve this array? – dev Oct 04 '18 at 02:33
  • If the JSON can be serialized (which in 99% of cases it can). See this post (the accepted answer) for how to do this ... https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage – danday74 Oct 04 '18 at 02:37
  • 1
    If the data is circular (non-serializable), just normalize it, i.e., using [normalizr](https://github.com/paularmstrong/normalizr) or roll your own ad hoc solution. – Rafael Oct 04 '18 at 02:46
  • 1
    wow looks like a great lib, initially written by the maker of react and 100k downloads per week, love it, probably (underlined) overkill here but deffo a good one to know about – danday74 Oct 04 '18 at 02:48
  • Ok I will clearly explain it to you I want to add the array one by one May be with push array with structure like above and store it in local storage and retrieve it and add one more and again store it. And I what to use it different place in the project.Is there any way to do it. – dev Oct 04 '18 at 03:01
  • Yes, just use localstorage as you suggested. I'm confident in your case it will be fine (and even if not you can use normalizr in conjunction with localstorage) - Alternatively, you could use ngrx which provides a global store of data that any component can access - However, there is a learning curve and most free tutorials online are rubbish - ngrx is far more (underlined) complicated than using local storage (but is considered the more professional approach) - you would need to pay to use the Udemy course and set aside 2 days of your time to get your head around the tutorials. – danday74 Oct 04 '18 at 03:09
2

You can use the index of ngFor to access the elements of the second array.

<ng-container *ngFor="let a of apple; index as i">
   <h1>{{a}}</h1>
   <h2>{{b[i]}}</h2>
</ng-container>
Dulanjaya Tennekoon
  • 2,408
  • 1
  • 18
  • 31