Perhaps my question is not very clear, but what I am attempting to do is when the Feed item in the categories screen is clicked, all companies related to Feeding will be listed on the companies screen.
I am quite confused because each category may have multiple companies and I am unsure how to list them properly. Can someone assist me?
The first image shows my category screen where clicking on the Feed item should display all companies related to the feed category.
https://i.sstatic.net/xuqbO.png
The next image pertains to the Company page where all companies related to Food will be listed.
https://i.sstatic.net/RhcnE.png
My items are stored as objects within my App.
Here is my home.html
<ion-content id="#pageTop">
<ion-searchbar (ionInput)="getItems($event)" placeholder="Search"></ion-searchbar>
<ion-item *ngFor="let item of items">
<ion-thumbnail item-left>
<img [src]="item.imagem">
</ion-thumbnail>
<h2>{{ item?.category }}</h2>
<button ion-button clear item-end color="primary" (click)="itemTapped($event, item)">Open</button>
</ion-item>
<ion-fab right bottom>
<button ion-fab color="secondary" (click)="pageScroller()"><ion-icon name="ios-arrow-up"></ion-icon></button>
</ion-fab>
And within my home.ts, this is where the objects are stored:
initializeItems(){
this.items = [
{ category: 'Food', imagem: '../../assets/imgs/food.jpg'},
]
}
This is the part where I am uncertain, as I intend to add an array of type company in the object and include all the companies there, but duplicates of objects are not allowed.
For example:
this.items = [
{ category: 'Food', imagem: '../../assets/imgs/food.jpg', company:'companyOne', company:'companyTwo'},
]
My company.html looks like this:
<ion-item *ngFor="let company of company">
<h2>{{ company?.category }}</h2>
</ion-item>
And my company.ts is structured as follows:
company: any[];
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.company = this.navParams.get('item');
}