Hello, I have want to Select the option of product and it will show the product in the same time.
but i have some error.
<ion-card-content class="option-heigt">
<ion-row>
<ion-col size="6">
<ion-img src="assets/no-image.jpg"></ion-img>
</ion-col>
<ion-col size="6" >
<!-- <p style="font-size: 16px; padding: 5px;">Size</p> -->
<!-- {{pro_option.sub_name}} -->
<div class="selection-option" style="border:1px solid black; border-radius:8px;color:black">
<ion-select [(ngModel)]="sub_name" (ionChange)="codeSelected()">
<ion-select-option *ngFor="let pro_option of product_detail_option" value="item">
<p style="font-size: 18px; border: 1px solid gray;padding:7px; text-align: center; border-radius: 5px;">
{{pro_option.sub_name}}
</p>
</ion-select-option>
</ion-select>
</div>
<!-- {{pro_option.sub_name}}</p> -->
<ion-row style="padding-top: 32px;">
<div *ngFor="let pro of productsub">
<ion-col size="6">
<!-- <p style="font-size: 16px;padding-top: 14px;text-align: center;">Price:</p> -->
<h4 style="padding-top: 14px;text-align: center;">Price:</h4>
</ion-col>
<ion-col size="6">
<!-- <p style="padding-top:1%;font-size: 27px; text-align: center; color: blue; font-weight: bold" > ${{pro_option.price}}</p> -->
<h1 style="font-size:18px;padding-top:25%;text-align: right; color: blue; font-weight: bold" > $ {{pro.price}}</h1>
</ion-col>
</div>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
<ion-card-header class="flaour-header">
<ion-row>
<ion-col size="8">
<p><b>Flavor/Option</b></p>
</ion-col>
<ion-col size="4">
</ion-col>
</ion-row>
</ion-card-header>
<ion-card-content style="padding:0px;" *ngFor="let pro_no_group of product_detail_option_no_group" >
<ion-row *ngIf="pro_no_group.sub_name == pro_option.sub_name" style="padding-right: 20px;padding-left: 20px; border-bottom: 1px solid #bbb1b3" >
<ion-col size="8">
<ion-row>
<ion-col size=12 class="col-height">
<p>
{{pro_no_group.opt_name}}
</p>
</ion-col>
<ion-col size=12 class="col-height">
<p>Expires : {{pro_no_group.ex_date}}</p>
</ion-col>
</ion-row>
</ion-col>
<ion-col size="4">
<ion-button expand="block" size="medium" class="addtocart" (click)="addToCart(pro_no_group)" color="cart">
<p>Add To Cart</p>
</ion-button>
</ion-col>
</ion-row>
codeSelected() {
console.log(this.sub_name);
let item = this.sub_name;
this.api.getProductByIdOption(this.route.snapshot.paramMap.get('prod_id'))
.subscribe( res => {
if(res.sub_name == item.sub_name){
this.productsub = res;
this.api.getProductByIdNoGroup(this.route.snapshot.paramMap.get('prod_id'))
.subscribe( res => {
console.log(res);
this.product_detail_option_no_group =res ;
}, err => {
console.log(err);
});
}
// this.initObject(res);
// console.log(this.product_detail_option =res);
});
}