Как сделать трехстороннее связывание данных в Angular & Firebase?

Question

Я новичок в угловой и огненной базе, так что мне не ясно. Сейчас я работаю над приложением электронной коммерции, в частности, на странице корзины покупок. У меня есть коллекция в базе данных, называемая «корзина», которая содержит продукты в качестве документов, и я получаю данные, хранящиеся в массиве объектов в моем файле cart.component.ts . Затем я зацикливаю этот массив в файле cart.component.html , чтобы отобразить его данные в виде элементов корзины. Все это прекрасно работает, но сейчас я пытаюсь связать значение ' кол-во ' со значением в базе данных, поэтому, когда пользователь изменяет его, оно изменяется в базе данных. а также.

вот файл (cart.component.ts):

import { Component, OnInit } from '@angular/core';
import { Goods } from 'src/app/interfaces/goods';
import { CartService } from './../../services/cart.service';

@Component({
  selector: 'app-shopping-cart',
  templateUrl: './shopping-cart.component.html',
  styleUrls: ['./shopping-cart.component.scss']
})
export class ShoppingCartComponent implements OnInit {

  cartGoods: Array<Goods>;

  constructor(private cartSer: CartService) {}

  ngOnInit() {
    this.cartSer.getCartGoods().subscribe(data => {
      this.cartGoods = data.map(el => {
        return {
          id: el.payload.doc.id,
          ...el.payload.doc.data()
        };
      });
    });
  }

}

вот файл (cart.component.html):

<ul class="cart">
  <li *ngFor="let good of cartGoods">
    <img [src]="good.img" [alt]="good.name">
    <h4 class="name"> {{ good.name | titlecase }} </h4>
    <strong class="price"> {{ good.price | currency }} </strong>
    <input class="qty" type="number" [(ngModel)]="good.qty">
  </li>
</ul>

Answer 1

Предостережение:

Обновление базы данных для поддержания синхронизации с количеством может быть не очень хорошей идеей, поскольку - если вы имеете в виду HTTP-запрос - это будет означать гораздо больше запросов, чем необходимо, и медленновниз ваше приложение. Представьте, что пользователь нажимает стрелку вверх или вниз на вашем числовом вводе, чтобы изменить количество. Каждый раз, когда происходит изменение, выполняется HTTP-вызов. Нет ли опции для кнопки «Отправить» или «Сохранить», которую пользователь может щелкнуть, чтобы указать, что он завершил настройку количества?

Чтобы сделать то, что вы просили:

Самый простой способ сделать это, вероятно,для привязки к выводу ngModelChange директивы ngModel:

<input class="qty" type="number" [(ngModel)]="good.qty" 
        (ngModelChange)="saveQty(good)">

Таким образом, вы будете выполнять saveQty и передавать его продукту всякий раз, когда изменяется значение модели. Оттуда вы можете сохранить good.qty где хотите.

Дополнительные советы

То, что я предложил, будет работать, но его нелегко масштабировать или тестировать. Для вашей максимальной долгосрочной выгоды я предлагаю вам узнать, как использовать API ReactiveForms для управления каждым поведением форм в вашем классе компонентов. Для этого конкретного случая использования я бы использовал FormArray для динамического создания столько входов, сколько необходимо для товаров в корзине.