0

Estoy intentando insertar un elemento de un json en una tabla y en una posicion concreta, pero no hay manera. Consigo filtrar los elementos mediante ng-if, pero me lo coloca en la posicion del objeto, y no donde lo filtro de la tabla. Esto es lo "mas cercano" que he conseguido, pero cuando lo intento aplicar a toda la fila o tabla no me funciona, me paso lo que he comentado arriba. Me coloca en la posicion de la array. Alguna pista? A alguien le ha pasado lo mismo?

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

Modelo de Datos:

    export class  Student {
    id: number;
    name: string;
    surname: string;
    DataIni: string;
    course: string;
    mesa: number;
    gender: string;
    email: string;
    absences: number;

   constructor(response) {
       this.id = response.id;
       this.name = response.name;
       this.surname = response.surname;
       this.DataIni = response.DataIni;
       this.course = response.course;
       this.mesa = response.mesa;
       this.gender = response.gender;
       this.email = response.email;
       this.absences = response.absences;
   }

}

Json

{
  "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:

    @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);
         });
      }

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.

5
  • 1
    Hola. Puedes poner un ejemplo de los datos?
    – Legna
    Commented el 5 ago. 2019 a las 13:16
  • Me parece que podríamos ayudarte mejor si pones el modelo de tus datos y explicando mejor qué es lo que quieres lograr.
    – akko
    Commented el 5 ago. 2019 a las 21:00
  • Ya he añadido el modelo. Perdonad, esto de Angular me esta dando guerra, pero espero poder entenderlo pronto. ;) Commented el 6 ago. 2019 a las 14:19
  • Puedes replicar tu error o el problema en algún entorno como Stackblitz?
    – jecorrales
    Commented el 6 ago. 2019 a las 14:33
  • jecorrales, el "problema" es que no me da un error. Funciona bien, pero no hace lo que yo quiero. Lo que necesito hacer es colocar los elementos del Json, en una posicion determinada de la tabla o grid, en funcion ( condicion) de la mesa donde se encuentren. Estoy intentando poner "fisicamente" los alumnos en la mesa correcta de la aula, asi los profesores pueden ver donde estan sentados los alumnos directamente sin tener que contar mesas. Commented el 7 ago. 2019 a las 8:11

2 respuestas 2

0

Para usar filtros en Angular lo mejor que puedes hacer es editar el array donde tienes los datos que muestras en tu tabla, por lo que veo en tu codigo se llama students, entonces al obtener los datos los guardas es en una variable studentsData, y cada vez que necesites filtrar colocas tus estudiantes filtrados en students

this.studentsData = this.getStudents();
this.students = this.studentsData.filter(student => student.mesa == 35)

luego si necesitas volver a como estaba

this.students = this.studentsData;
3
  • Gracias @gustavo! aunque eso ya lo he hecho y no me ha servido. Lo que me pasa es que cuando lo filtro en la tabla, me lo pone en la misma posición de la array. Es decir, si el elemente students.mesa ===35, esta en la posición 25, me lo ponen en la posicion de la tabla 25, dejando los demas vacios. Me explico? Commented el 7 ago. 2019 a las 7:56
  • podrias editar tu publicacion y mostrar como estas filtrando ?. Si dices que cuando filtras, sigue mostrando las siguientes filas, es por que tu array sigue teniendo todas los otros datos, tu array filtrado deberia tener la misma cantidad de registros que tu array completo ?. Commented el 7 ago. 2019 a las 8:20
  • Lo acao de hacer, dime si te sirve, ok? Muchas gracias a todos por vuestros comentarios!! ;) Commented el 7 ago. 2019 a las 8:49
0

Si lo que quieres es ordenar un array de objetos en base a un valor de un atributo de los objetos, puedes usar Array.sort

var todosLosDatos = [ {'a': 1}, {'a': 4}, {'a': 3}, {'a': 2} ]
console.log(todosLosDatos);

var datosOrdenados = todosLosDatos.sort((elemento1, elemento2) => elemento1.a - elemento2.a);

console.log(datosOrdenados);

1
  • Gracias ArienJm, es muy útil lo que propones, pero creo que para este caso no me sirve. Simplemente quiero poner los elementos según una condición ( numero de mesa) en la posición de la tabla ( que seria la posición física que tienen las mesas en una aula) que yo quiera. Es decir, lo posición del elemento en la array, no tiene nada que ver con el numero de mesa. Commented el 7 ago. 2019 a las 8:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.