Angular Typescript Specify a collection of string array inside a parent collection. Getting Compiler error

Question

I am trying to specify a nested string array inside a parent collection array. I tried a couple of changes but I keep getting the red line compiler error. I tried google but I have not resolved my error.

I have an interface

interface Sale {
dates: string[];
categories: string[];
}

In my object which I will bind to the UI, I got

sales: Sale[] = [
{ dates: ['1/2/2019', '1/3/2019', '1/4/2019'],
  categories: {
   {['$3398.63', 'N/A', '$5858.31', '0.00', '(2858.31)'],
   ['$4398.63', 'N/A', '$6858.31', '0.00', '(3858.31)'],
['$5398.63', 'N/A', '$7858.31', '0.00', '(4858.31)'],
   };
  }

}];

In my categories subarray, I could not 1 to may collection of arrays. Above, I have 3 string arrays belong to categories. In my angular ui, I would like to do something like this

*ngFor= "let category of sale.categories" and it will iterate thur each of the 3 category array. In each of the category, I can list the array element like the followinging

<li *ngFor= "let element of category>
  {{element}}
</li>

so I am looking to display of the UI something like this

$3398.33 N/A 0 (2858.31)

$4398.63 N/A 0 (3858.31)

Any help is appreciated. Thanks.

Ritik Patni · Accepted Answer · 2019-02-15 18:26:45Z

1

You can do it like this

interface category: string[]
interface Sale {
  dates: string[];
  categories: category[];
}
sales: Sale[] = [{
  dates: ['1/2/2019', '1/3/2019', '1/4/2019'],
  categories:[
      ['$3398.63', 'N/A', '$5858.31', '0.00', '(2858.31)'],
      ['$4398.63', 'N/A', '$6858.31', '0.00', '(3858.31)'],
      ['$5398.63', 'N/A', '$7858.31', '0.00', '(4858.31)']
      ]
}];

<li *ngFor= "let category of categories">
  <p *ngFor= "let element of category">{{element}}</p>
</li>

answered Feb 15, 2019 at 18:26

Ritik Patni

4811 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

c0micrage · Accepted Answer · 2019-02-15 19:03:09Z

0

I got the following to work. the changes are in bold

interface Sale {
dates: string[];
categories: **any**[];
}




sales: Sale[] = [
{ dates: ['1/2/2019', '1/3/2019', '1/4/2019'],
  categories: {
   {**values**: ['$3398.63', 'N/A', '$5858.31', '0.00', '(2858.31)'],
   **values**: ['$4398.63', 'N/A', '$6858.31', '0.00', '(3858.31)'],
**values**: ['$5398.63', 'N/A', '$7858.31', '0.00', '(4858.31)'],
   };
  }

}];

answered Feb 15, 2019 at 19:03

c0micrage

1,1803 gold badges28 silver badges62 bronze badges

1 Comment

Woohoojin Over a year ago

This is a poor way of solving the problem, values as a key in the json here isn't serving any purpose. Consider implementing Ritik Patni's solution, as it is cleaner.

Collectives™ on Stack Overflow

Angular Typescript Specify a collection of string array inside a parent collection. Getting Compiler error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related