Question

我有一个组件，当用户登录时，我必须用localStorage项“”的值过滤 etapasColumns 中的列（这就是我将“ switch”放在顶部的原因）部门”。 etapasColumns 变量用于通过 getEtapa（）方法在childComponent etapa-column-component2 上呈现视图。

问题在于，除非我刷新页面，否则组件启动时将无法正常工作。

例如：用户登录（1）时：

但是所需的效果是这样的（添加了该列）（2）：

组件启动时，视图类似于（1），但是如果我重新加载页面（f5），则视图类似于（2）

这怎么能正常工作？

这是父组件此开关用于过滤变量：

const sector=parseInt(localStorage.getItem("sector"));
let MAP_NOMBRE_ETAPA:{[tipoEtapa:string]:number}={};
switch (sector){
  case 1:
    MAP_NOMBRE_ETAPA={
      "documentacion":1    
    }
    break;
  case 2:
    MAP_NOMBRE_ETAPA={
      "bobinaBT1":2,
      "bobinaBT2":3,
      "bobinaBT3":4,
      "bobinaAT1":5,
      "bobinaAT2":6,
      "bobinaAT3":7,
      "bobinaRG1":8,
      "bobinaRG2":9,
      "bobinaRG3":10,
      "bobinaRF1":11,
      "bobinaRF2":12,
      "bobinaRF3":13,
      "ensamblajeBobinas":14
    }
    break;
  case 3:
    MAP_NOMBRE_ETAPA={
      "corteYPlegadoPYS":15,
      "soldaduraPYS":16,
      "envioPYS":17,
      "cYPTapaCuba":21,
      "tapa":22,
      "radiadoresOPaneles":23,
      "cuba":24,
      "tintasPenetrantes":25,
      "granallado":26,
      "pintura":27
    }
    break;
  case 4:
    MAP_NOMBRE_ETAPA={
      "nucleo":18
    }
    break;
  case 5:
    MAP_NOMBRE_ETAPA={
      "montaje":19
    }
    break;
  case 6:
    MAP_NOMBRE_ETAPA={
      "horno":20
    }
    break;
  case 7:
    MAP_NOMBRE_ETAPA={
      "encubado":28
    }
    break;
  case 8:
      MAP_NOMBRE_ETAPA={
        "ensayosRef":29
      }
      break;
  case 9:
    MAP_NOMBRE_ETAPA={
      "terminacion":30,
      "envioADeposito":31,
      "envioACliente":32 
    }
    break;
}

@Component({
  selector: 'app-timer-reloaded',
  templateUrl: './timer-reloaded.component.html',
  styleUrls: ['./timer-reloaded.component.css']
})
export class TimerReloadedComponent implements OnInit {

  dataGetTrafos:MatTableDataSource<any>;
  isLoadingResults=true;
  trafosResponse:Transformadores[]=[];
  
  

  displayedColumns2:string[]=[
    'oTe',
    'oPe',
    'rangoInicio',
    'rangoFin',
    'observaciones',
    'potencia',
    'nombreCli',
  ]
  dataTrafo:Transformadores;

  etapasColumns: string[]= Object.keys(MAP_NOMBRE_ETAPA);

  
  

  allColumns: string[]= this.displayedColumns2.concat(this.etapasColumns);
  
  etapasActualizadas:boolean;

  procesoElegido:Object;
  selectedProceso=false;


  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild(MatTable, { static: false }) matTable: MatTable<any>;
  constructor(private ngZone: NgZone,private etapaService:EtapaService,private empleadoService:EmpleadoService,private transformadoresService:TransformadoresService,private route: ActivatedRoute,private _snackBar: MatSnackBar) {
    
    
   }

  ngOnInit(): void {
    
    this.getTrafos();
  }


  getTrafos():void{
    this.transformadoresService.getTrafos()
    .subscribe(transfo => {
      this.dataGetTrafos=new MatTableDataSource();
      this.dataGetTrafos.data=transfo;
      this.dataGetTrafos.sort = this.sort;
      
      this.isLoadingResults = false;
    }, err => {
      // console.log(err);
      this.isLoadingResults = false;
    });
  }

 getEtapa(t:Transformadores, nombreEtapa: string): any {
    let matchEtapa = t.etapa.filter(etapa => etapa.idTipoEtapa == MAP_NOMBRE_ETAPA[nombreEtapa]);

    if(matchEtapa.length!=0)
    {
      return matchEtapa[0];
    }
    if(this.etapasActualizadas==true)
    {
      this.getTrafos();
    }
  }

这是子组件：

@Component({
  selector: 'etapa-column-component2',
  template: `
  <ng-container *ngIf="etapa">
    <div style="height:61px; line-height:61px" [style.background-color] = "etapa.idColorNavigation ? etapa.idColorNavigation.codigoColor : 'white'" [matTooltip]="etapa.idColorNavigation ? etapa.idColorNavigation.leyenda : '' ">
      <span *ngIf="etapa.dateIni" (click)=select(etapa)>{{etapa.numEtapa}}</span>
      <!--
      <span style="padding-left:30px;" *ngIf="etapa.dateFin" (click)=select(etapa) >{{etapa.numEtapa}}</span>
      <span style="padding-left:30px;" *ngIf="(etapa.tiempoParc)!='Finalizada' && (etapa.tiempoParc)!=null" (click)=select(etapa) >{{etapa.numEtapa}}
      </span>
      -->
      <button mat-icon-button style="float:right;" *ngIf="!etapa.dateIni" (click)=select(etapa)><mat-icon>done</mat-icon></button>
      
    </div>
  </ng-container>
  `,
  styleUrls: ['./timer-reloaded.component.css']
})
export class EtapaColumnComponent2{
  @Input() etapa:Etapa;
  @Output() procesoSelected=new EventEmitter<Etapa>();
  
  select(row){
    
    this.procesoSelected.emit(row);

  }
}

html是这样的：

<table mat-table [dataSource]="dataGetTrafos" >
        <ng-container *ngFor="let column of displayedColumns2" sticky matColumnDef="{{column}}">  
            <th mat-header-cell *matHeaderCellDef style="padding:20px!important">{{column}}</th>
            <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
        </ng-container>
        <ng-container *ngFor="let column of etapasColumns;" matColumnDef="{{column}}" >
            <th mat-header-cell *matHeaderCellDef style="padding:20px!important">{{column}}</th>
            <td mat-cell *matCellDef="let element" style="padding-right:0;">
              <etapa-column-component2 [etapa]="getEtapa(element, column)" (procesoSelected)="selected($event)">
                
              </etapa-column-component2>
            </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="allColumns;sticky: true" ></tr>
          <tr mat-row *matRowDef="let row; columns: allColumns;"></tr>
      
          <ng-container matColumnDef="groupHeader">
              <td mat-cell *matCellDef="let row" colspan="999" style="width:100%;background-color:rgb(247,150,70)!important;text-align:left"><div><strong>{{row.group}}</strong></div></td>
          </ng-container>
      
          <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"></tr>
    </table>

角材料列过滤

0 个答案: