Saya memiliki layanan troli di Aplikasi Angular saya dan saya mencoba membuat tombol kuantitas plus minus pada setiap item dalam daftar ketika telah ditambahkan ke troli, ketika item pertama kali ditambahkan ke troli, jumlahnya adalah 1 dan kemudian pengguna dengan menekan +- dapat mengubah kuantitasnya, masalahnya adalah ketika saya mengubah kuantitas menjadi 3 dan kemudian saya akan ke halaman keranjang dan menghapus item itu, dengan kembali ke halaman produk dan dengan menekan "tambahkan ke keranjang" itu mengatur item dengan jumlah 3 bukannya 1 meskipun sudah dihapus dari troli.

Ini kode saya:

CartService.ts:

addToCart(plu: Plu): void {
    this.carrello.plu.push(product);
    this.cartTotal(); // function which save the cart to localstorage
}

  getQta(plu: Plu): number { // getting qta to be set if the cart exist in products list
    const index = this.carrello.plu.indexOf(plu);
    if (index !== -1) {
      return this.carrello.plu[index].qta;
    }
    return 0;
  }

 updateQta(plu: Plu, qta: number): void {
    const index = this.carrello.plu.indexOf(plu);
    const oldQta = this.carrello.plu[index].qta;
    const newQta = oldQta + qta;
    if (newQta === 0){ // if quantity is 0 removing object from cart array
      this.carrello.plu.splice(index);
      this.cartTotal();
      return;
    }
    this.carrello.plu[index].qta = newQta; // else updating it with new quantity
    this.cartTotal();
  }

Kemudian HTML saya tempat saya memanggil metode itu terlihat seperti ini

<div *ngFor="let plu of plus">
                          <button
                            class="btn btn-block btn-primary"
                            [hidden]="getQta(plu) !== 0" // if never added to cart product show button Add to cart
                            (click)="addToCart(plu, $event)"
                          >
                            Aggiungi al carrello
                          </button>
                          <div
                            class="input-group"
                            [hidden]="getQta(plu) === 0" // else showing +- buttons for quantity
                          >
                            <div class="input-group-prepend">
                              <button class="btn btn-primary font-weight-bold" (click)="updateQta(plu, -1)">
                                -
                              </button>
                            </div>
                            <input
                              type="number"
                              class="form-control text-center"
                              disabled
                              [min]="plu.um === 'PZ' ? 1 : 0.001"
                              [step]="plu.um === 'PZ' ? 1 : 0.001"
                              [value]="
                                plu.um != 'PZ'
                                  ? (getQta(plu) | number: '1.3-3':'en-US')
                                  : getQta(plu)
                              "
                            />
                            <div class="input-group-append">
                              <button class="btn btn-primary font-weight-bold" (click)="updateQta(plu, 1)">
                                +
                              </button>
                            </div>
                          </div>
                        </div>
</div>

Kemudian metode baru saja dibuat ulang di ProductComponent.ts seperti ini untuk dipanggil kembali:

  addToCart(plu: Plu, event: Event): any {
    event.preventDefault();
    event.stopPropagation();
    this.cartService.addToCart(plu);
    this.showToast();
  }

  updateQta(plu: Plu, qta: number): void {
    this.cartService.updateQta(plu, qta);
  }

  getQta(plu: Plu): number {
    return this.cartService.getQta(plu);
  }

Tetapi begitu produk telah dihapus dari halaman CART dan saya akan kembali ke daftar Produk, objek asli setiap Plu yang saya ubah jumlahnya menjadikannya sebagai kuantitas alih-alih 1 jadi saya benar-benar melihat "tombol Tambahkan ke troli" tetapi setelah diklik itu akan menampilkan jumlah yang terakhir dipilih karena telah disetel ke objek asli ...

EDIT:

Berikut adalah contoh kecil dari ProductComponent saya dengan layanan cart, seperti yang Anda lihat setelah item ditambahkan ke cart, dan ditambahkan lagi (jika item ada di cart service saya menambahkan qta alih-alih mendorongnya lagi ke array) qta item yang ditambahkan bahkan berubah

StackBlitz

0
NiceToMytyuk 19 November 2020, 17:23

1 menjawab

Jawaban Terbaik

Saya melihat apa masalahnya dengan solusi Anda. Masalahnya adalah Anda menambahkan ke koleksi (array carrelo) referensi objek alih-alih instance objek baru.

Jadi hal yang terjadi adalah pertama kali ketika Anda menekan add Anda menambahkan produk dengan {qta:1 , id:1} ke array carrelo, setelah itu setiap kali setelah itu ketika Anda menambahkan produk, Anda mencari (dan menemukan) produk dengan id yang sama tetapi sebenarnya produk ini persis sama dengan yang dilewatkan dari fungsi addProduct (keduanya adalah referensi yang menunjuk ke nilai yang sama), yang berarti Anda akan menggandakannya qta.

Ini stackblitz beserta solusinya, silakan baca komentar di dalam cart.service .

** Hati-hati dengan hal yang lewat dengan referensi

1
Християн Христов 20 November 2020, 08:47