Skip to main content
Actualizacion de la tabla donde se van a mostrar los datos
Origen Enlace
    @Component({
   selector: 'app-aula',
   templateUrl: './aula.component.html',
   styleUrls: ['./aula.component.scss'],

})
export class AulaComponent implements OnInit {
  @HostBinding('class') classes = 'row';
   students: Student[] ;
   desk: number;

   constructor( public apiService: ApiService, private route: Router) { }
   
    ngOnInit() {
       this.getStudentsList();
   }

   getStudentsList() {
      this.apiService.getStudentsList().subscribe(
         (res: Student[]) => {
            this.students = res;
            console.log(typeof(this.students));
            console.log(this.students);
         });
      }

    @Component({
   selector: 'app-aula',
   templateUrl: './aula.component.html',
   styleUrls: ['./aula.component.scss'],

})
export class AulaComponent implements OnInit {
  @HostBinding('class') classes = 'row';
   students: Student[] ;
   desk: number;

   constructor( public apiService: ApiService, private route: Router) { }
   
    ngOnInit() {
       this.getStudentsList();
   }

   getStudentsList() {
      this.apiService.getStudentsList().subscribe(
         (res: Student[]) => {
            this.students = res;
            console.log(typeof(this.students));
            console.log(this.students);
         });
      }

Actualizacion de la tabla donde se van a mostrar los datos
Origen Enlace
{
  "Students": [
    {
      "id": 3,
      "name": "Lexi",
      "surname": "Trebilcock",
      "email": "[email protected]",
      "gender": "Female",
      "mesa": 3,
      "course": "BackEnd",
      "DataIni": "2/8/2019",
      "absences": 1
    },
    {
      "id": 4,
      "name": "Bancroft",
      "surname": "Keirl",
      "email": "[email protected]",
      "gender": "Male",
      "mesa": 4,
      "course": "BackEnd",
      "DataIni": "8/24/2018",
      "absences": 2
    },
[![Este es el resultado que tendria que salir, pero cada elemento dentro de un div en concreto segun condicion][1]][1]...
}


[![mesas][2]][2]
En esta imagen se puede ver que la mesa 7, la a colocado en la posicon que esta del Json, pero no en el espacio que me gustaria, que tendria que ser el rectangulo numero 7.

  [1]: https://i.sstatic.net/IiWQC.png
  [2]: https://i.sstatic.net/gu77p.png

Este es el resultado que tendria que salir, pero cada elemento dentro de un div en concreto segun condicion...

Esto es el Aula.component, aqui es donde cargo todo el Json y despues en el HTML intento filtrar por elemento:

mesas En esta imagen se puede ver que la mesa 7, la a colocado en la posicon que esta del Json, pero no en el espacio que me gustaria, que tendria que ser el rectangulo numero 7.

{
  "Students": [
    {
      "id": 3,
      "name": "Lexi",
      "surname": "Trebilcock",
      "email": "[email protected]",
      "gender": "Female",
      "mesa": 3,
      "course": "BackEnd",
      "DataIni": "2/8/2019",
      "absences": 1
    },
    {
      "id": 4,
      "name": "Bancroft",
      "surname": "Keirl",
      "email": "[email protected]",
      "gender": "Male",
      "mesa": 4,
      "course": "BackEnd",
      "DataIni": "8/24/2018",
      "absences": 2
    },
[![Este es el resultado que tendria que salir, pero cada elemento dentro de un div en concreto segun condicion][1]][1]...
}


[![mesas][2]][2]
En esta imagen se puede ver que la mesa 7, la a colocado en la posicon que esta del Json, pero no en el espacio que me gustaria, que tendria que ser el rectangulo numero 7.

  [1]: https://i.sstatic.net/IiWQC.png
  [2]: https://i.sstatic.net/gu77p.png
{
  "Students": [
    {
      "id": 3,
      "name": "Lexi",
      "surname": "Trebilcock",
      "email": "[email protected]",
      "gender": "Female",
      "mesa": 3,
      "course": "BackEnd",
      "DataIni": "2/8/2019",
      "absences": 1
    },
    {
      "id": 4,
      "name": "Bancroft",
      "surname": "Keirl",
      "email": "[email protected]",
      "gender": "Male",
      "mesa": 4,
      "course": "BackEnd",
      "DataIni": "8/24/2018",
      "absences": 2
    },

Este es el resultado que tendria que salir, pero cada elemento dentro de un div en concreto segun condicion...

Esto es el Aula.component, aqui es donde cargo todo el Json y despues en el HTML intento filtrar por elemento:

mesas En esta imagen se puede ver que la mesa 7, la a colocado en la posicon que esta del Json, pero no en el espacio que me gustaria, que tendria que ser el rectangulo numero 7.

Actualizacion de la tabla donde se van a mostrar los datos
Origen Enlace
<ng    <div class="col-containermd-12">
      <div class="table-responsive">
        <table class="table  table-striped table-bordered">
          <thead>
            <tr >         
                <td *ngFor="let student of students">students" >
  <td *ngIf="student.mesa ===35">
              <div [ngClass]="{
                    'cmFronEnd' :student.course ==='FrontEnd',
                    'cmBackEnd':student.course ==='BackEnd',
                    'cmNet':student.course ==='.net',
                    'cmAndroid':student.course ==='Android'
                    }" class=" mx-sm-1  text-center mt-2 size">
                    <div *ngIf="student.mesa ===7">
                    <p>{{student.course}}</p>
                    <p>{{student.DataIni}}</p>
                    <p>Mesa: {{student.mesa}}</p>
                    </div>
                  </td>div>
                </ng-container>td>
              <td>

<ng-container *ngFor="let student of students">
  <td *ngIf="student.mesa ===35">
    <div [ngClass]="{
      'cmFronEnd' :student.course ==='FrontEnd',
      'cmBackEnd':student.course ==='BackEnd',
      'cmNet':student.course ==='.net',
      'cmAndroid':student.course ==='Android'
      }" class=" mx-sm-1  text-center mt-2 size">
      <p>{{student.course}}</p>
      <p>{{student.DataIni}}</p>
      <p>Mesa: {{student.mesa}}</p>
    </div>
  </td>
</ng-container>
    <div class="col-md-12">
      <div class="table-responsive">
        <table class="table  table-striped table-bordered">
          <thead>
            <tr >         
                <td *ngFor="let student of students" >
                  <div [ngClass]="{
                    'cmFronEnd' :student.course ==='FrontEnd',
                    'cmBackEnd':student.course ==='BackEnd',
                    'cmNet':student.course ==='.net',
                    'cmAndroid':student.course ==='Android'
                    }" class=" mx-sm-1  text-center mt-2 size">
                    <div *ngIf="student.mesa ===7">
                    <p>{{student.course}}</p>
                    <p>{{student.DataIni}}</p>
                    <p>Mesa: {{student.mesa}}</p>
                    </div>
                  </div>
                </td>
              <td>

se añadieron 238 caracteres en el cuerpo
Origen Enlace
Loading
se añadieron 629 caracteres en el cuerpo
Origen Enlace
Loading
Loading
Origen Enlace
Loading