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