Select option and show data at the same time

@Lyhout wrote:

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);
      });

  }

Posts: 1

Participants: 1

Read full topic