1

introducir la descripción de la imagen aquí

Tengo que ordenar la tabla por niveles, ordene mi json con los datos: Nivel1 y sus hijos Nivel2 y los hijos Nivel3, es decir el Nivel3 depende de Nivel2 y este depende de Nivel 1. Logre hacer algo con Angular1 con ng-repeat pero no logre hacer el rowspan dinamico lo cual supongo es necesario. En el sistema que estoy dando soporte es necesario trabajar con Angular9 y este usa *ngFor llevo ya varios días varado en esto gracias de antemano.

Como lo muestro a continuación cada objeto del json tiene un objeto hijos[] nivel2 y este tiene a su vez otro objeto hijos[] nivel3, recorriendo así tres niveles.

//Interfaces 
interface hijos2 {
  name: string;
  type: string;
  mark: string;
  hijos:hijos3[];
}
interface hijos3 {
  name: string;
  type: string;
  mark: string;
}
interface Niveles {
    nivel: string;
    name: string;
    hijos: hijos2[];
}

//El construccion de los datos
  const NIVELES: Niveles[]  = [
  {
    nivel: 'nivel-1',
    name: 'Nombre1 nivel1',
    hijos: [
      {
        name: 'Nombre1 nivel2',
        type: '1nivel2',
        mark: 'Sony',
        hijos:[
          {  
            name: 'Nombre1 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          },         
          {   
            name: 'Nombre2 nivel3',
            type: 'Computer3.1',
            mark: 'Sony'
          }
        ]
      },
      {
        name: 'Nombre2 nivel2',
        type: '2nivel2',
        mark: 'Sony',
        hijos:[
          {   
            name: 'Nombre1 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          },
          {   
            name: 'Nombre2 nivel3',
            type: 'Computer3.1',
            mark: 'Sony'
          }
        ]
      }
    ]
  },
    {
    nivel: 'nivel-1',
    name: 'Nombre2 nivel1',
    hijos: [
      {
        name: 'Nombre1 nivel2',
        type: '1nivel2',
        mark: 'Sony',
        hijos:[
          {  
            name: 'Nombre1 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          },
          {  
            name: 'Nombre2 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          },
          {  
            name: 'Nombre3 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          },
          {  
            name: 'Nombre4 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          }
        ]
      },
      {
        name: 'Nombre2 nivel2',
        type: '2nivel2',
        mark: 'Sony',
        hijos:[
          {   
            name: 'Nombre1 nivel3',
            type: 'Computer3',
            mark: 'Sony'
          },
          {   
            name: 'Nombre2 nivel3',
            type: 'Computer3.1',
            mark: 'Sony'
          }
        ]
      }
    ]
  }
];

export class NgbdTableBasic {
  niveles = NIVELES;
}

Html

<table class="table table-striped">
    <thead>
      <tr>
      <tr>
        <th>Nivel1</th>
        <th>Nivel2</th>
        <th>Nivel3</th>
        <th>Otros datos Nivel3</th>
      </tr>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let p of pessoas; index as i">
        <td rowspan="4">{{p.name}}      
          <td rowspan="2">{{p.hijos[0].name}}   
            <td>{{p.hijos[0].hijos[0].name}}</td>
            <td>{{p.hijos[0].hijos[0].mark}}</td>
            <tr *ngFor="let n3 of p.hijos[$index].hijos; index as i">

    </tbody>
</table>

Esto lo estaba haciendo en Angular1,con el rowspan quemado, no logre hacerlo dinámico
<tr *ngFor="let p of niveles; index as i">
        <td rowspan="4">{{p.name}}      
          <td rowspan="2">{{p.hijos[0].name}}   
            <td>{{p.hijos[0].hijos[0].name}}</td>
            <td>{{p.hijos[0].hijos[0].mark}}</td>            
            <tr *ngFor="let n3  of p.hijos[j].hijos; index as j">
              <td>{{n3.name}}</td>
              <td>{{n3.mark}}  </td>
            </tr>
          </td>
          <tr ng-repeat="n2 in p.hijos" ng-if="$index &gt; 0">
            <td rowspan="{{(2)}}">{{n2.name}}  
              <td>{{n2.hijos[0].name}}</td>
              <td>{{n2.hijos[0].mark}}
                <tr ng-repeat="n3 in p.hijos[$index].hijos" ng-if="$index &gt; 0">
                  <td>{{n3.name}}</td>
                  <td>{{n3.mark}}</td>
                </tr>
              </td>
            </td>
          </tr>
        </td>
      </tr>

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.