Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Atualização de valor selecionado po-combo#1935

Unanswered
danielscheeren asked this question inAngular
Discussion options

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

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

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

You must be logged in to vote

Replies: 3 comments 2 replies

Comment options

Boa Tarde@danielscheeren, tudo bem?

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

attr.

You must be logged in to vote
2 replies
@kleberrogersantos
Comment options

Boa tarde.
Tudo bem?
Tenho a mesma situação, há alguma solução ?

Obrigado

@leandroayala
Comment options

Estou com esse mesmo problema.

Comment options

Encontrei esse mesmo problema usando o angular 19.1.0. Alguém conseguiu solucionar?

You must be logged in to vote
0 replies
Comment options

Bom dia pessoal, na doc do combo fala sobre o ngModel, por favor verifiquem se isso resolve o problema reportado:
image
Att.

You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Angular
Labels
None yet
6 participants
@danielscheeren@leandroayala@alinelariguet@rebecaas@anliben@kleberrogersantos

[8]ページ先頭

©2009-2025 Movatter.jp