一个离子选择选项正在改变所有离子选择选项 - Angular/Ionic 4+

Question

以下是我要实现的目标的摘要：

使用“动态”下拉菜单创建卡片以选择“产品”并将这些卡片添加为每个产品的对象。例如：将显示 3 张卡片。当我“添加到卡片”一张卡片时，我的结帐将是 JSON 对象中的 3 个对象。

我的问题，这是业余水平，但在这里：

当我在一张卡片上更改一个下拉菜单时，所有其他下拉菜单也会更改。 EG：我将 card 1 上的 dropdown A 更改为“Chicken”，然后 card 2 和 card 3 更改了它的 下拉 A 到鸡。但它们旨在保持默认的“选择产品”值。

这是我正在处理的示例代码：

products.serivce.ts -- 有虚拟数据来填写下拉列表。

export class ProductsService{

  private category = [
    { id: 1, name: 'Sea Food' },
    { id: 2, name: 'Pasta' },
    { id: 3, name: 'Sushi' }
  ];

  private foodName= [
    { id: 1, name: 'Fish-A', category_id: 1, category_name: 'Sea Food' },
    { id: 2, name: 'Fish-B', category_id: 1, category_name: 'Sea Food' },
    { id: 3, name: 'Fish-C', category_id: 1, category_name: 'Sea Food' },
    { id: 4, name: 'Pasta-A', category_id: 2, category_name: 'Pasta' },
    { id: 5, name: 'Pasta-B', category_id: 2, category_name: 'Pasta' },
    { id: 6, name: 'RawFish-A', category_id: 3, category_name: 'Sushi' },
    { id: 7, name: 'RawFish-B', category_id: 3, category_name: 'Sushi' }
  ];

  constructor() { }

  getCategory() {
    return this.category;
  }
  getFoodName() {
    return this.foodName;
  }

}

home.page.ts

export class HomePage implements OnInit {

  category = [];
  foodName= [];

  public selectedFoodCategory : any[];

  public sFood: any;

  cardArrayOfObjects = [];
  name = '';
  constructor(
    private cartService: ProductsService) {
  }

  ngOnInit() {
    this.category = this.cartService.getCategory();
    this.foodName = this.cartService.getFoodName();
  }

   setFoodValues(sFood) {
    this.selectedFoodCategory  = this.foodName.filter(district => district.category_id == sFood.id)
  }

  getNumberOfCards() {
    this.cardArrayOfObjects .length = 0;
    const name = Number(this.name);
    for (let i = 1; i <= name; i++) {
      let obj = {
        Name: [`Card Number ${i}`],
      };
      this.cardArrayOfObjects.push(obj);
    }
  }

}

home.page.html -- 最后是 HTML

<ion-header>
  <ion-row class="ion-align-items-center ion-justify-content-center">
    <ion-input [(ngModel)]="name" clearInput type="number" class="ion-padding"
      placeholder="How many orders would you like?"></ion-input>
    <ion-button primary (click)="getNumberOfCards()">Get Started</ion-button>
  </ion-row>
</ion-header>

<ion-content>
  <ion-slides>
    <ion-slide *ngFor="let cardObj of cardArrayOfObjects">
      <ion-card>
        <ion-card-header>
          <ion-card-content>
                    <ion-item>
              <ion-label>Category</ion-label>
              <ion-select (ionChange)="setFoodValues(sFood)" [(ngModel)]="sFood">
                <ion-select-option [value]="sFood" *ngFor="let sFood of category ">{{sFood.name}} </ion-select-option>
              </ion-select>

            </ion-item>
          </ion-card-content>
        </ion-card-header>
      </ion-card>
    </ion-slide>
  </ion-slides>

</ion-content>

我删除了我认为没有必要缩短此问题的所有内容。没有任何控制台，编译错误。任何帮助和/或建议将不胜感激。

Answer 1

看起来您所有的 ion-select 都具有相同的 ngModel sFood。由于有多种产品，您需要有一个代表它的表单模型。如果您要使用[(ngModel)]="sFood"，您可能需要在其上使用索引并将 sFood 设为数组。

*ngFor="let card of cardArrayObjects; let i = index"

如果您将 sFood 设为数组，则类似于 [(ngModel)]="sFood[i]"。