Atualizar opçoes do po-combo

Framework - Linha Protheus Ferramentas
1

Estou iniciando em Angular/PO-UI, e estou com um problema que acredito ser simples, mas estou apanhando.

Criei dois po-combo, preciso filtrar o segundo de acordo com o que foi selecionado no primeiro.
Ao tentar atualizar o sendo esta dando o erro:

Captura
Captura1262×398 46.6 KB

HTML:

@if(isLoading){
.
}@else{

<po-page-default p-title="Seleção de OP">
    
    <po-combo 
        name="linhaCombo"
        p-label="Linha de produção" 
        (ngModel)="linhaSelected"
        [p-options]="allLinhas"
        class="po-sm-12 po-md-6 po-lg-4"
        (p-change)="changeLinha($event)"
        />
        <po-combo 
        name="opCombo" 
        (ngModel)="opSelected"
        p-label="Ordem de produção" 
        [p-options]="opsFiltered"
        [p-disabled]="!isLinhaSelected"
        class="po-sm-12 po-md-6 po-lg-4"
    />
    
</po-page-default>

}

.ts:

import { Component, inject, OnInit } from ‘@angular/core’;
import { PoButtonModule, PoDynamicModule, PoPageSlideModule, PoFieldModule, PoPageModule, PoLoadingModule } from ‘@po-ui/ng-components’;
import { LinhasService } from ‘…/…/services/linhas.service’;
import { Linhas } from ‘…/…/classes/linhas’;
import { OpsService } from ‘…/…/services/ops.service’;
import { Ops } from ‘…/…/classes/ops’;
import { FormsModule } from ‘@angular/forms’;

@Component({
selector: ‘app-massaspage’,
imports: [PoPageSlideModule, PoButtonModule, PoDynamicModule, PoFieldModule, PoPageModule, PoLoadingModule, FormsModule],
templateUrl: ‘./massaspage.component.html’,
styleUrl: ‘./massaspage.component.css’,
})

export class MassaspageComponent implements OnInit {
#linhasService = inject(LinhasService);
#opsService = inject(OpsService);
allLinhas: Array = ;
allOps: Array = ;
opsFiltered: Array = ;
isLoading: boolean = true;
isLinhaSelected: boolean = false;
linhaSelected: string = “”;
opSelected: string = “”;

ngOnInit(): void {
    this.allLinhas = this.loadLinhas();
    this.allOps = this.loadOps();
}

loadLinhas():Array<Linhas> {
    let req = this.#linhasService.getLinhas();
    let linhas: Array<any> = [];
    req.subscribe( (res:any) => {
        res.items.forEach((el: any) => {
            linhas.push({value: el.codigo, label: el.descricao });
        });
    });
    return linhas
}

loadOps():Array<Ops> {
    let req = this.#opsService.getOps();
    let ops: Array<any> = []
    req.subscribe( (res:any)  => {
        res.items.forEach( (el : Ops) => {
            ops.push({ value: el.op, label: el.descricao, linha: el.linha});
        })
        this.isLoading = false;
    });
    return ops;
}

changeLinha(linhaSelected: any) {
    this.opsFiltered = [];
    let newListOps = this.allOps.filter( item => item.linha === linhaSelected);
    if( JSON.stringify(newListOps) !== JSON.stringify(this.opsFiltered) ) {
        this.opsFiltered = newListOps;
    }
    this.isLinhaSelected = true;
}

}

2

parece que os itens filtrados não estão iguais.

sugiro verificar se o ‘linhaSelected’ e o ‘item.linha’ estão iguais.