Atualização de valor selecionado po-combo

[danielscheeren]

Boa tarde.

Estou implementando um po-combo e realizando algumas tratativas. Uma delas seria adicionar uma das opções como o valor incial (selecionado).
Tentei utilizar o ngmodel para a atualização, porém não surte efeito. O mesmo também não permite fazer uso do two-way binding informando o erro: The property and event halves of the two-way binding 'ngModel' are not bound to the same target..

Estou me baseando no exemplo da documentação:

Ao utilizar o [ngModel] para setar a informação, nada acontece:

produtos-list.component.html
`
<po-page-default p-title="Produtos" [p-actions]="actions" [p-breadcrumb]="breadcrumb">

<po-widget class="po-lg-12">
    <form #fOption="ngForm">
        
        <po-combo ngDefaultControl
            name="combo"
            p-label="Selecione:"
            [ngModel]="selectedOption"
            (p-change)="seleciona_opcao($event)"
            [p-options]="options"
            bindLabel="label">
        </po-combo>

        <po-divider
            p-border-width="string" >
        </po-divider>
        
        <po-table
            [p-hide-text-overflow]="true"
            [p-show-more-disabled]="disableNext"
            p-container [p-sort]="true"
            [p-striped]="true"
            [p-columns]="columns"
            [p-items]="items"
            (p-show-more)="getItems(true)">
        </po-table>
        
    </form>
</po-widget>

`

produtos-list.component.ts
`
import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
// import { ClienteListService } from './produtos-list.service';
import { Router } from '@angular/router'
import { PoPageAction, PoBreadcrumb, PoTableColumn, PoDialogService, PoNotificationService, PoComboOption, PoComboOptionGroup } from '@po-ui/ng-components';
import { lastValueFrom } from 'rxjs'
import { NgForm } from '@angular/forms';

// services
import { ProdutosListService } from './produtos-list.service';

@component({
selector: 'app-produtos-list',
templateUrl: './produtos-list.component.html',
styleUrls: ['./produtos-list.component.css']
})
export class ProdutosListComponent implements OnInit {
@ViewChild('fOption', { static: true }) form: NgForm;

items: Array = [];
page = 1;
disableNext = false;
selectedOption: string = 'Teste1';

public readonly actions: Array = [
{ label: 'Atualizar', action: this.getItems.bind(this), icon: 'po-icon-refresh' },
{ label: 'Novo', action: () => { this.router.navigate(['/client-edit']) }, icon: 'po-icon-plus' },
];

public readonly breadcrumb: PoBreadcrumb = {
items: [{ label: 'Home', link: '/' }, { label: 'Produtos' }]
};

public readonly columns: Array = [
{ property: 'b1_cod', width: '10%', label: 'Código' },
{ property: 'b1_desc', width: '30%', label: 'Descrição' },
{ property: 'b1_grupo', width: '40%', label: 'Grupo' },
{ property: 'bm_desc', width: '40%', label: 'Descrição Grupo' }
]

public readonly options: Array<PoComboOption | PoComboOptionGroup> = [ // para criar agrupadores Array<PoComboOption | PoComboOptionGroup>
{ value: '1', label: 'Teste1'},
{ value: '2', label: 'Teste2'},
{ value: '3', label: 'Teste3'},
{ value: '4', label: 'Teste4'}
];

constructor(
private produtosListService: ProdutosListService,
private poDialog: PoDialogService,
public router: Router,
private poNotification: PoNotificationService,
) { }

ngOnInit() {
this.getItems();
}

getItems(lShowMore = false) {

if (lShowMore) {
  this.page++
} else {
  this.items = [{ }]
}

this.produtosListService
  .get(this.page).subscribe(
    {
      next: (data: any) => {
        // console.log(`get ${this.page}`)
        // console.log("data", data)
        this.items = [...data.items];
        this.disableNext = data.disablenext;
      }

    }
  )

}

@output() openMultiselectEventHandler: EventEmitter = new EventEmitter();
@output() closeMultiselectEventHandler: EventEmitter = new EventEmitter();

// evento ao selecionar opção do combo
seleciona_opcao(value: any) {

if (value == '1') {
  this.getItems()
} else if (value == '2') {
  this.getItems()
} else if (value == '3') {
  this.getItems()
} else if (value == '4') {
  this.getItems()
}

this.closeMultiselectEventHandler.emit(null)

}

}

`

Versão que estou utilizando:

[anliben]

Boa Tarde @danielscheeren, tudo bem?

Iremos analisar e em breve iremos responder sua solicitação.

attr.