отражать одинаковые выбранные данные во всех картах * ngFor - PullRequest
Новая
       22

отражать одинаковые выбранные данные во всех картах * ngFor

0 голосов
/ 21 февраля 2019

Я создал несколько карт, используя * ngIf.Внутри него есть выпадающий список (используется mat-select).Когда я выбираю один вариант из выпадающего списка, выбранный параметр отражается на всех карточках, которые не требуются.

<div class="allCards">
    <div *ngFor="let card of cardArray; let i=index">
      <mat-card class="example-card">
        <mat-card-header>
          <p class="productOffer">20% OFF</p>
        </mat-card-header>

          <img  mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"
            alt="Photo of a Shiba Inu">
            <mat-card-subtitle>{{card.name}}</mat-card-subtitle>
        <mat-card-content>

            <del >₹{{card.orgAmt}}</del>
            <p ngDefaultControl >₹{{card.discAmt}} </p>
        </mat-card-content>


        <mat-card-actions>

          <div class="actionItems">
            <mat-form-field style="width:150px;">
              <mat-select  placeholder="Select Quantity"  [(ngModel)]="selectedValue">
                <mat-option ngDefaultControl  *ngFor="let food of card.foods"  [value]="food.value">
                  {{food.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <span class="add-to-cart">
              <button  mat-mini-fab color="primary" (click)="decrCntr(i)" >-</button>
              <span ngDefaultControl >{{card.counterVar}}</span>
              <button  mat-mini-fab color="secondary" (click)="incrCntr(i)" >+</button>
            </span>
          </div>
          <button mat-button type='submit'(click)="onSubmit(i, selectedValue )">Add to Cart</button>

        </mat-card-actions>
      </mat-card>
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Это потому, что у вас одинаковые [(ngModel)]="selectedValue" для всех выбранных.Вы можете попробовать сделать так: [(ngModel)]="selectedValue{{i}}"

0 голосов
/ 21 февраля 2019

at [(ngModel)] = "selectedValue" добавить значение индекса, чтобы оно было уникальным

[(ngModel)] = "selectedValue {{i}} "

...