Implementación de edición de un jugador de la tabla

Se presenta el siguiente error:

ERRORError: "Reference.update failed: First argument contains undefined in property 'players.-LsNhqQIz1DxVJXUQFb2.leftFooted'"

Este error se presenta porque se supone que el formulario siempre es enviado en estado valido, sin embargo si no se selecciona el campo _Left Footed_ al crear un jugador nuevo (Se almacena sin la propiedad _leftFooted_ en Firebase, ya que se envía _null_) y si dicho registro es editado, el formulario es enviado con estado invalido y el campo _leftFooted = undefined_.

if (playerForm.valid) {
      playerFormValue.leftFooted = playerFormValue.leftFooted === '' ? false : playerFormValue.leftFooted;
    }

Dicho inconveniente se soluciono:

onSubmit(playerForm: NgForm) {
    const playerFormValue = { ...playerForm.value };
    if (playerForm.valid) {
      playerFormValue.leftFooted = (playerFormValue.leftFooted === '' || playerFormValue.leftFooted === undefined) ? false : playerFormValue.leftFooted;
    } else {
      if(playerFormValue.leftFooted === null || playerFormValue.leftFooted === undefined) {
        playerFormValue.leftFooted = false;
      }
    }
    if (this.player) {
      this.editPlayer(playerFormValue);
    } else {
      this.newPlayer(playerFormValue);
    }
    window.location.replace('#');
  }

El error no es visible en el ejemplo del vídeo porque el campo _Left Footed_ siempre estuvo seleccionado.

Varias ocasiones hace referencia a “inmutabilidad”, pero en los ejemplos anteriores no explica a qué es equivalente que se escriba tres puntos delante, cual sería el equivalente de no escribir con los tres puntos? Para mi no están claras las explicaciones en las que usa playerFormValue.

Sin duda la curva de aprendizaje es muy elevada, estoy sudando sangre para comprender algunos conceptos, por suerte esto solo me motiva más a seguir aprendiendo!

Inmutabilidad de objetos

La inmutabilidad es la propiedad que tiene un objeto que no puede cambiar su estado. Como consecuencia, la inmutabilidad aporta muchas facilidades a la hora de razonar sobre nuestro código, ya que nos libera de pensar en los cambios sufridos por objetos a lo largo del programa. Además, los objetos inmutables son automáticamente seguros en hilos (o thread-safe), ya que pueden ser accedidos de manera concurrente sin consecuencias, al no poder modificarse.

En programación orientada a objetos generalmente asumimos que el estado de un objeto puede cambiar según los métodos que se llamen sobre el mismo. Sin embargo, en ocasiones podemos construir clases que den lugar a objetos inmutables.

Referencia: https://www.campusmvp.es/recursos/post/programacion-funcional-inmutabilidad-y-funciones-puras.aspx

const playerFormValueKey = { ...playerFormValue, $key: this.player != null ? this.player.$key : null }

Si les sale el error de players , pueden arreglarlo así mas sencillo 😄

  if (playerForm.valid) {
      playerFormValue.leftFooter = playerFormValue.leftFooter ?? false;
    } else {
      if (!playerFormValue.leftFooted) {
        playerFormValue.leftFooted = false;
      }
    }

Cree dos para probar y solo se edita en una de las tablas alguno le pasa lo mismo?

a mi me pasa que edito un jugador y al darle submit en lugar de editarse, se crea uno nuevo y deja tambien el anterior

const formattedTeam = {
      ...this.team,
      // tslint:disable-next-line:whitespace
      players: [ ...(moddifiedPlayers ? moddifiedPlayers : [playerFormValueWithFormattedKey])]
    };```

Ojo al operador ternario, es decir al uso de ? y : En informática un operador ternario (a veces incorrectamente llamado operador terciario) es un operador que toma tres argumentos. Este operador ternario puede pasar varias líneas de código a una sola línea en lenguajes que puedan usarlo.

expresión boleana ? valor si cierto : valor si falso

Y otra manera de verse :

variable = condición ? valor si cierto : valor si falso

Aún no entiendo por qué indica que FireStore no permite push con Key, siendo que desde por ejemplo Kotlin, al enviar un push con Key, si encuentra el Documento por esa Key lo actualiza, sino lo crea y asigna esa Key al nuevo Documento.
Eso me ha complicado bastante el aprendizaje, ya que me queda dando vueltas… ¿Será que solo para Angular FireStore no permite el push con Key?

Esta clase sí que está bastante complicada.

Hubieron dos cosas que me llamaron la atención.
1.- Dado que el player a editar que se pasa a la función editPlayer viene desde el parámetro ngForm del método onSubmit realmente nunca tendrá la propiedad $key asignada.
2.- El delete que se hace de la propiedad $key en la línea 53 realmente no tendrá ningún efecto, a mi parecer, ya que la destructuración de propiedades en la línea 52 se realiza con las propiedades que tienen valor y como no hay valor en $key entonces nunca se asignará al objeto playerFormValueWithFormattedKey.

Para los que tengan el error que no existe la propiedad key.

En proyect-dialog.components.ts

private editPlayer(playerFormValue: Player) {
    const playerFormValueWithKey = {
      ...playerFormValue,
      $key: this.player.$key,
    };
    const playerFormValueWithFormattedKey = {
      ...playerFormValue,
      key: this.player.$key,
    };
    delete playerFormValueWithFormattedKey.$key;
    const moddifiedPlayers = this.team.players
      ? this.team.players.map((player: any) => {
          return player.key === this.player.$key
            ? playerFormValueWithFormattedKey
            : player;
        })
      : this.team.players;
    const formattedTeam = {
      ...this.team,
      players: [
        ...(moddifiedPlayers
          ? moddifiedPlayers
          : [playerFormValueWithFormattedKey]),
      ],
    };
    this.playerService.editPlayer(playerFormValueWithKey);
    this.teamService.editTeam(formattedTeam);
  }

Ademas si no edita, sino por el contrario se crea doble hacer la siguiente corrección en el mismo documento

onSubmit(playerForm: NgForm) {
    const playerFormValue = {
      ...playerForm.value,
    };
    if (playerForm.valid) {
      playerFormValue.leftFooted =
        playerFormValue.leftFooted === "" ? false : playerFormValue.leftFooted;
    }
    if (this.player) {
      this.editPlayer(playerFormValue);
    } else {
      this.newPlayer(playerFormValue);
    }
    window.location.replace("#");
  }

me parce o el profe usa muchas variables con el nombre player?