Debugging de la aplicación

Pequeño tip para VSCode, para seleccionar todas las ocurrencias de una sola vez, en Windows es Ctrl + F2.

Si les sale un error de tipo “Property ‘player’ does not
exist on type ‘PlayerDialogComponent’.”

Es porque tiene que poner dentro de la clase PlayerDialogComponent un atributo player
"public player;"

Si llegan a tener el problema de que no aparece el botón de New Player Form y de que tiene mucho scroll la pagina modifiquen este estilo del body:

Antes:

  body {
    font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    background-color: #f69d75;
    color: #555555;
  }

Después

  body {
    font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    background-color: #f69d75;
    color: #555555;
  }

Espero les sea util 😃

private team:any;
  public player:any;
  public countries = Object.keys(Country).map(key => ({ label: key, key: Country }));
  public squadNumber = Object.keys(SquadNumber)
    .slice(Object.keys(SquadNumber).length / 2)
    .map(key => ({
      label: key,
      key: SquadNumber[Number(key)]
    }));

Angular 12…

Cuidado con el input de leftFooted tipo checkbox, me di cuenta que se quedó con el atributo required y eso es incorrecto (se tiene que quitar). Como el jugador puede ser zurdo o no, el campo no debe ser obligatorio. Cada que pongamos a un diestro (dejando vacío el checkbox), Angular entenderá que el formulario no es válido.

Disculpen los estilos de esta aplicación donde los encuentro? ya que en el repo no están y se pierden muchas cosas.

La estructura del curso es un poco desorganizada, hay partes que se omitieron como cuando el crea la funcionalidad de Close() y el problema con el asunto del evento para cerrar el formulario.
He gastado un tiempo considerable solo solucionado problemas , aunque eso siempre pasa pero para la duración de este curso me es un poco incomodo.

Bueno en realidad en este punto hay un error en el código o en la lógica mas bien, porque cuando guardas mas jugadores, en la tabla de MY TEAM solo en la columna de players solo muestra el ultimo que has agregado y en el colección de team.players de firebase siempre se guarda el ultimo no se crea un arreglo de players.

PD: pensé que era problema en mi código pero descargue la versión que esta el Archivos y Enlaces, y el error persiste.

PD2: A alguien mas le ha pasado?

Por favor alguien tiene documentación un poco del error al que se refiere el profesor ?

Sigo impresionado de la facilidad con la que se puede enviar y recibir información de angular a firebase

Buenos días, por favor me ayudan con este error:
core.js:6210 ERROR RangeError: Maximum call stack size exceeded

Pequeño tip para VSCode, para seleccionar cierta cantidad de ocurrencias para un fragmento de código, en Windows es Ctrl + D

Excelente curso!

No sé si soy el único con el error de que, cuando agrego un segundo jugador, éste sobreescribe al primero (sólo en la tabla del equipo, no en la de jugadores).
.
Lo solucioné suscribiéndose al teamService cada que se va a agregar un jugador, para tomar el dato más actualizado del equipo desde firebse, y ahí, ya insertar el formattedTeam. El método newPlayer queda así:
.

private newPlayer(playerFormValue: any): void {
    const key = this.playerService.addPlayer(playerFormValue).key;
    const playerFormValueWithKey = {
      ...playerFormValue,
      key,
    };

    // team needs to be updated from firebase
    this.teamService
      .getTeams()
      .pipe(take(1))
      .subscribe((teams) => {
        this.team = teams[0];

        const formattedTeam = {
          ...this.team,
          players: [
            ...(this.team.players ? this.team.players : []),
            playerFormValueWithKey,
          ],
        };

        this.teamService.editTeam(formattedTeam);
      });
  }

No me muestra el modal, es decir la ventana NEW PLAYER FORM, encuentro el código igual, no se que pasa, alguien me puede ayudar

<div id="open-modal" class="modal-window">
    <div>
      <a href="#" title="Close" class="modal-close">Close</a>
      <h1>New Player Form</h1>
      <div>
        <form #playerForm="ngForm" novalidate (ngSubmit)="onSubmit(playerForm)">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" name="name" [ngModel]="player?.name" ngModel required />
          </div>
  
          <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" name="lastName" [ngModel]="player?.lastName" ngModel required />
          </div>
  
          <div class="form-group">
            <label for="position">Position</label>
            <select class="form-control" name="position" [ngModel]="player?.position" ngModel required>
              <option *ngFor="let position of squadNumber" [value]="position.key">{{ position.label }}</option>
            </select>
          </div>
  
          <div class="form-group">
            <label for="weight">Weight</label>
            <input type="text" class="form-control" name="weight" [ngModel]="player?.weight" ngModel required />
          </div>
  
          <div class="form-group">
            <label for="height">Height</label>
            <input type="text" class="form-control" name="height" [ngModel]="player?.height" ngModel required />
          </div>
  
          <div class="form-group">
            <label for="nationality">Nationality</label>
            <select class="form-control" name="nationality" [ngModel]="player?.nationality" ngModel required>
              <option *ngFor="let nationality of countries" [value]="nationality.key">{{ nationality.label }}</option>
            </select>
          </div>
  
          <div class="form-group">
            <label for="leftFooted">Left Footed</label>
            <input type="checkbox" class="form-control checkbox" name="leftFooted" [ngModel]="player?.leftFooted" ngModel required />
          </div>
  
          <div class="submit-container">
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>