CODEWITHSUNDEEP
angulartypescript
c0micrage
c0micrage

Reputation: 1180

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

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.

Upvotes: 0

Views: 192

Answers (2)

c0micrage
c0micrage

Reputation: 1180

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)'],
   };
  }

}];

Upvotes: 0

Ritik Patni
Ritik Patni

Reputation: 481

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>

Upvotes: 1

Related Questions