angular - 選択オプションの値は、他のすべての選択オプションに対して変更されます

Question

  <nb-select [(ngModel)]="selectedOption" 
  (click)="getProdDetails(p.ProductName,p.Brand)" ngDefaultControl>
  <nb-option [value]="p.Size" class="text-nowrap" [hidden]="hide">
     {{ p.Size }} : + {{ p.SaleRate | currency: "INR": 'symbol' : 
 '1.0-0'}}
  </nb-option>
  <nb-option class="text-nowrap" [value]="i.Size" *ngFor="let i of 
     prodDetails"[hidden]="!hide">
     {{ i.Size }} : + {{ i.SaleRate |currency: "INR": 'symbol' : 
 '1.0-0'}}
  </nb-option>
  </nb-select>



 .ts code:

  selectedOption: any;
  getData(){
  this.ProdData = [];
 this.commonservice.get('api').subscribe((data) => {
    const temp = data.data["data"];
   // by using for loop i am iterating through each value of array 
   and pushing it in ProdData
    this.ProdData.push(temp);
   )}
   }
 Similarly in <nb-select> the p is getting values from ProdData 
 Array.
 getProdDetails(name,brand){
 this.prodDetails = [];
 this.commonService
  .get(url)
  .subscribe((res) => {
    const temp = res.data["data"];
     )} 
 }

下の画像を参照してください。最初のnb-optionでは、さまざまな配列から値を取得します。次に、メソッドで定義されたnb-option配列から値を取得します 。getProdDetails()2nd のオプション値をクリックするとnb-option、すべての選択オプションの値が選択したオプションに置き換えられます。

それが役立つことを願っています！また、[(ngModel)] を使用しなければ問題なく動作しています。しかし、それを使用して値をバインドし、.ts ファイルで使用する必要があります。オプションを選択するたびに、選択したアイテムを選択ボックスに表示したいと思います。