Как получить значение параметров выбора / индекса из зацикленного массива в мой компонент, чтобы я мог показать его в моем component.ts

Question

Я прочитал несколько вопросов о переполнении стека, но ни один из них не имеет отношения к проблеме, которую я пытаюсь решить.

У меня есть component.html, в котором моя опция выбора получает значение, используя *ngFor из моего количества продукта

<form class="form">
      <select [(ngModel)]="selectedQuantity" (ngModelChange)="setQtyValue()" name="quantitySelector">
        <option  *ngFor = "let totalQty of productQty; index as i"  [attr.data-index] ="i" [value]="totalQty[i]">{{totalQty}}</option>
      </select>

      <button class="btn btn-primary" [routerLink]="['/cart']" (click)="addToCart()">
        Add to bag
      </button>
    </form>

И в моем component.ts

selectedQuantity: Number

constructor( ) { }

setQtyValue(){
    this.selectedQuantity = +this.selectedQuantity  
    console.log(this.selectedQuantity)
  }

  addToCart(){

    console.log(selectedIndex)
    this.productDetails.map(product =>{
      console.log(this.productDetails)
      this.productSelected = {
        name : product.name,
        pictureUrl : product.pictures,
        qty : this.selectedQuantity,
        timestamp : new Date().getTime()
      }
    })
    this.cartService.addToCart(this.productSelected)
  }

Я пробовал много способов получить значение выбранного индекса / опции, но он всегда регистрируется как неопределенный,Что мне нужно изменить из приведенного выше кода, чтобы получить и что делать в моем component.ts, чтобы получить его значение в виде числа, чтобы потом я мог потом обработать его на моем service.ts

Answer 1

Вам не нужно вручную увеличивать значение selectedQuantity при использовании двусторонней привязки данных.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <form class="form">
        <select [(ngModel)]="selectedQuantity" name="quantitySelector">
            <option *ngFor="let totalQty of productQty" [value]="totalQty">{{totalQty}}</option>
        </select>

        <button class="btn btn-primary" (click)="addToCart()">Add to bag</button>
    </form>`,
})
export class AppComponent {
  productQty: number[] = Array.from({ length: 99 }, (v, k) => k + 1);
  selectedQuantity: Number = 1;

  addToCart() {
    console.log(this.selectedQuantity);

    //...
  }
}

https://stackblitz.com/edit/angular-13ebb2

Answer 2

console.log(selectedIndex)?Вы имели в виду this.selectedQuantity?Также вы не установили начальное значение для selectedQuantity, и поэтому оно не определено