No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Implementaci贸n de nuevo jugador a la tabla 1

23/28
Recursos

Aportes 22

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥渃urso 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.

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]
    }