Implementación de nuevo jugador a la tabla 1

Soy el único que se estresa con estas clases?

Para traer los headers de la tabla de jugadores, lo podemos hacer de forma similar a los headers de la tabla de equipos, así:

• En player.service.ts agregamos:

export const PlayersTableHeaders = ['Name', 'Last Name', 'Position', 'Weight', 'Height', 'Nationality', 'Left Footed', 'Actions'];

• En player-table.component.ts agregamos:

public playersTableHeaders = PlayersTableHeaders;

• En player-table.component.html agregamos:

    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th *ngFor="let header of playersTableHeaders">{{ header }}</th>
        </tr>
      </thead>
    </table>

Para los que están buscando el Repo del curso en GitHub, Acá les dejo el link https://github.com/AppleLAN/typescript-platzi

Creo que hasta aqui dejare este curso, ya que usa muchos términos que desconozco y cuando me genera error no tengo la bases para resolverlos ya que es mi primer ves con angular, revise el “curso de angular” y este tienen todas las bases que necesito, creo que este curso debe ponerse después de la ruta, ya que nos hace avanzar en un callejón si salida jajaja

Si tienen error en el player-dialog al momento de crear el arreglo de countries pueden hacer esto

public contries = Object.keys(Country).map(key => ({label: key, key: key.indexOf }))

por que se ponee un setTimeout, puedes explicar el tema del sincronismo que mencionas

Si quieren que su appp tenga los mismos diseños del profe estos son: (Esto va en src/style.scss)

body {
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
}
section {
  margin: 50px;
}

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table {
  width: 100%;
  table-layout: fixed;
}
.tbl-header {
  background-color: rgba(255, 255, 255, 0.3);
}
.tbl-content {
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.tbl-content-player {
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 300px;
}

th {
  padding: 20px15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
td {
  padding: 15px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &:target {
    opacity: 1;
    pointer-events: auto;
  }
  & > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: #ffffff;
    color: #333333;
  }
  header {
    font-weight: bold;
  }
  h1 {
    font-size: 150%;
    margin: 0015px;
    color: #333333;
  }
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: #000;
  }
}

form {
  .form-group {
    padding-bottom: 15px;
  }

  input,
  textarea,
  select {
    width: 235px;
    background-color: #f6f6f6;
    border: solid 1px#25c481;
    font-size: 13px;
    color: #000000;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
  }

  select {
    width: 246px;
  }

  label {
    font-size: 14px;
    color: #555555;
    font-weight: normal;
    display: block;
    float: left;
    margin: 0;
    padding: 3px13px00;
    text-align: right;
    width: 140px;
  }

  .checkbox {
    width: auto;
  }

  .submit-container {
    text-align: right;
  }

  .submit {
    background-color: #25b7c4;
    border: solid 1px#25c481;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 25px;
    padding-left: 25px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  &.requiredlabel {
    font-weight: bold;
  }

  span.requiredlabel {
    font-weight: bold;
  }
}

/* Demo Styles */

html,
body {
  height: 100%;
}

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

a {
  color: inherit;
}

.container {
  justify-content: center;
  align-items: center;
  height: 50px;
}

.btn {
  background-color: #fff;
  padding: 1em1.5em;
  border-radius: 3px;
  text-decoration: none;
  i {
    padding-right: 0.3em;
  }
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 006px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 006px rgba(0, 0, 0, 0.3);
}

Object.keys(Country).map( (key, index,array) => ({label: key, key: (<any>Country)[key]}))

Sinceramente, el curso no se me ha hecho tan difícil como algunos comentarios que he leído. Entiendo que no todos aprendemos igual, que algunos tenemos más experiencia que otros, pero no por eso el curso o el profesor o el curso es malo. Si no entendemos algo muy bien, tenemos la opción de volver a verlo, investigar en otro lado y luego volver, cada quien aprender a su ritmo y a su manera.

Le hice pequeñas modificaciones para que me funcionara.

import { Component, OnInit } from '@angular/core';
import { Countries, Player, SquadNumber } from '../interfaces/player';
import { Team } from '../interfaces/team';

import { take } from 'rxjs/operators';
import { NgForm } from '@angular/forms';
import { PlayerService } from '../services/player.service';
import { TeamService } from '../services/team.service';

declare type CategoryType = keyof typeof Countries;
@Component({
  selector: 'app-player-dialog',
  templateUrl: './player-dialog.component.html',
  styleUrls: ['./player-dialog.component.scss'],
})
export class PlayerDialogComponent implements OnInit {
  private team!: Team;
  public countries = Object.keys(Countries).map((key) => ({
    label: key,
    key: Countries[key as CategoryType],
  }));
  public squadNumber = Object.keys(SquadNumber)
    .slice(Object.keys(SquadNumber).length / 2)
    .map((key: any) => ({
      label: key,
      key: SquadNumber[key],
    }));
  constructor(
    private playerService: PlayerService,
    private teamService: TeamService
  ) {}

  ngOnInit(): void {
    this.teamService
      .getTeams()
      .pipe(take(1))
      .subscribe((teams) => {
        if (teams.length > 0) {
          this.team = teams[0];
        }
      });
  }

  private newPlayer(playerFormValue: Player) {
    const key = this.playerService.addPlayer(playerFormValue).key;
    const playerFormValueKey = {
      ...playerFormValue,
      key,
    };
    const formattedTeam = {
      ...this.team,
      players: [
        ...(this.team.players ? this.team.players : []),
        playerFormValueKey,
      ],
    };
    this.teamService.editTeam(formattedTeam);
  }
}

este curso de angular no es básico, tienes que saber algo de angular o tener un poquito de experiencia para que no te pierdas.

Problemitas con definiciones, en los indices de los map y demás , aqui dejo algunas cosas que me ayudaron.
https://stackoverflow.com/questions/43811771/how-to-fix-declare-var-error-unexpected-token-on-typescript

https://stackoverflow.com/questions/47859678/element-implicitly-has-an-any-type-because-the-index-expression-is-not-of-type

Si tienen problemitas con sus variables antes del constructor, les dejo este recurso que les puede servir cuando les aparece: Property has no initializer and is not definitely assigned in the constructor

https://stackoverflow.com/questions/64874221/property-has-no-initializer-and-is-not-definitely-assigned-in-the-constructor

Creo que un detalle que si no esta bien, son los momentos donde el profesor copia el código de alguna parte y lo pega, nos dejas r loco o al menos a mi.

private newPlayer(playerFormValue){
    const key = this.playerService.addPlayer(playerFormValue).key;
    const playerFormValueKey={
      ...playerFormValue,key
    }
    const formattedTeam={
      ...this.team,
      players:[...(this.team.players? this.team.players:[]),playerFormValueKey]
    }
    this.teamService.editTeam(formattedTeam);
  }

Alguien de buena caridad sabe donde esta el repositorio para bajarme los estilos jaja

si tienen problemas al crear las propiedades countries y squadNumber en player-dialog.component.ts. Pueden hacerlo tambien de la siguiente manera:

public countries = Object.entries(Countries).map((item) => ({ label: item[0], key: item[1] }));

public squadNumber = Object.entries(SquadNumber)
    .slice(Object.entries(SquadNumber).length / 2)
    .map((item) => ({ label: item[0], key: item[1] }));

Excelente explicacion.

<section>
  <h1>Players</h1>
  <div class="container">
    <div class="interior">
      <a class="btn" (click)="newPlayer()">New Player</a>
    </div>
  </div>
  <div class="tbl-header">
    <table cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th *ngFor="let header of playersTableHeaders">{{ header }}</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="tbl-content-player">
    <table cellpadding="0" cellspacing="0" border="0">
      <tbody>
        <tr *ngFor="let player of (players$ | async)">
          <th>{{player.name}}</th>
          <th>{{player.lastName}}</th>
          <th>{{player.position}}</th>
          <th>{{player.weight}}</th>
          <th>{{player.height}}</th>
          <th>{{player.nationality}}</th>
          <th>{{player.leftFooted}}</th>
          <th>
            <button>Edit</button>
            <button>Delete</button>
          </th>
          <th>
            <p *ngFor="let player of team.players">{{player.name}}</p>
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</section>

Buenas tardes, la tabla no se me ve ni en el color, ni la distribución igual que como se ve en la pantalla del instructor, en pocas palabras los estilos no me están funcionando, me pueden explicar ¿porque? si he escrito exactamente el mismo código, o en que archivo tiene los estilos que no los encuentro.

Quedo atento. Gracias

- Checked: Existe un typo en el archivo styles.scss que no permite que el front se visualice exactamente igual que el del profesor, solo que hay que separar con un espacio los valores del th.

Justo así:

th {
  padding: 20px  15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

una forma más limpia de definir el objeto formatterdTeam podría ser esta

const formattedTeam = {
      ...this.team,
      players: [...this.team.players||[], playerFormValueKey]
    }