Ir para conteúdo
araujoitalo

Pegar valor da tabela em um componente Angular

Recommended Posts

Olá a todos!

 

Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:

 

Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.

    temperaturaMaxima: {
        type: 'number',
        title: 'Temperatura Máxima',
      },
      temperaturaMinima: {
        title: 'Temperatura Mínima',
        type: 'number',
      },
      temperaturaMedia: {
        title: 'Temperatura Média',
        type: 'number',
        editor: {
          type: 'custom',
          component: SmartTableEditorFunctionsComponent,
          valuePrepareFunction(instance) {
            instance.save.subscribe();
          },
        },
      },

 

Imagem da tabela: 

image.thumb.png.d144be6f875d15306f4ab45efcaac90a.png

 

Criei um botão para tentar recuperar o valor, porem sem sucesso.

 

Código do componente:

 

export class SmartTableEditorFunctionsComponent extends DefaultEditor {
  @Input() value: string | number;
  @Input() rowData: any;
  @Output() save: EventEmitter<any> = new EventEmitter();
  constructor() {
    super();
  }

  getPlaceholder(value: any) {
    const id = value.column.temperaturaMaxima;
    return id;
  }

  test() {
    const id = this.rowData.temperaturaMaxima;
    alert('TESTE' + id);
  }
}

Código do template do componente: 

{{ cell.newValue }}
<input
  type="number"
  [(ngModel)]="cell.newValue"
  [name]="cell.getId()"
  [placeholder]="cell.getTitle()"
  [disabled]="!cell.isEditable()"
  (click)="onClick.emit($event)"
/>

<button (click)="test()">Pega Valor</button>

Alguém poderia me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por eiwes
      Eu tenho esse código, mas preciso retornar funções puras em vez de funções mutáveis.
       
      É possível? Talvez usando OOP? Não sei como melhorar isso.
       
      Tentei retornar os valores de cada função, mas não obtive sucesso.
       
      import { AssetStatusType } from '@domain/interfaces/common' import { BothComponentType, ComponentsType, GroupFiltersType, OperationType, OverviewModelType, PendenciesOverviewType, PendenciesType, StructurePendenciesCount, StructureStatusCount } from '../../types' const updateStatusCount = ( statusCount: StructureStatusCount, status: AssetStatusType ) => { statusCount[status] = (statusCount[status] || 0) + 1 } const updatePendenciesCount = ( pendenciesCount: StructurePendenciesCount, key: AssetStatusType, subKey: OperationType | PendenciesOverviewType ) => { pendenciesCount[key] = pendenciesCount[key] ?? {} pendenciesCount[key][subKey] = (pendenciesCount[key]?.[subKey] || 0) + 1 } const processOverviewPendencies = ( pendencies: PendenciesType[] | null | undefined, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string ) => { if (pendencies?.length) { for (const { state, pendencyType } of pendencies) { const uniqueId = `${state}-${pendencyType}-${id}` if (!countedIds.has(uniqueId)) { updatePendenciesCount(pendenciesCount, state, pendencyType) countedIds.add(uniqueId) } } } } const processOverviewComponents = ( components: ComponentsType[], isGroupByTree: boolean, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string>, id: string, type: BothComponentType ) => { for (const { pendencies, status, operationType } of components) { if (isGroupByTree && type === 'location') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewPendencies(pendencies, pendenciesCount, countedIds, id) } } const processOverviewData = ( data: OverviewModelType[], groupBy: GroupFiltersType, statusCount: StructureStatusCount, pendenciesCount: StructurePendenciesCount, countedIds: Set<string> ) => { const isGroupByTree = groupBy === 'tree' const isGroupByAsset = groupBy === 'asset' for (const { id, status, components, operationType, type } of data) { if (isGroupByAsset || type === 'asset') { updateStatusCount(statusCount, status) if (operationType) { updatePendenciesCount(pendenciesCount, status, operationType) } } processOverviewComponents( components, isGroupByTree, statusCount, pendenciesCount, countedIds, id, type ) } } export const calculateOverviewCounts = ( data: OverviewModelType[], groupBy: GroupFiltersType ) => { const statusCount: StructureStatusCount = {} as StructureStatusCount const pendenciesCount: StructurePendenciesCount = {} as StructurePendenciesCount const countedIds = new Set<string>() processOverviewData(data, groupBy, statusCount, pendenciesCount, countedIds) return { ...statusCount, pendencies: pendenciesCount } } Existe uma maneira mais limpa e elegante de fazer isso? Preciso retornar um objeto como este:
      // calculateOverviewCounts return this { pendencies: StructurePendenciesCount; working: number; inAlert: number; warning: number; stopped: number; off: number; } StructurePendenciesCount é:

    • Por araujoitalo
      Olá a todos!
       
      Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
       
      Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
      temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },  
      Imagem da tabela: 

       
      Criei um botão para tentar recuperar o valor, porem sem sucesso.
       
      Código do componente:
       
      export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente: 
      {{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
    • Por Lucas.RR
      Boa tarde a todos, estou tentando fazer um autocomplete com suggestion e uso o TypeScript, vi esta aplicação no youtube mas sem utilizar o TypeScript.
      Quando rodo a aplicação ela funciona, mas mostra erro na pagina quando é carregada, por causa da falta de tipagem, gostaria de saber como fazer.
      A aplicação funciona assim:
      carrego os nomes que tenho no banco de dados vindos do back:
      useEffect(() => { const loadUsers = async() => { const response = await api.get('/cadastrousuarios'); setUsers(response.data); console.log(response.data); } loadUsers(); }, []); na propriedade do input onChange eu chamei onChangeHandler:
      <input type='text' className='col-md-12 input' onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeHandler(e.target.value)} value={text}/>  
      É no onChangeHandler que esta o problema, o código pega o valor que do get em .json e procura na coluna_nome os valores que são inputados no input e mostra as sugestões:
      const onChangeHandler = (text: any) => { let matches: React.SetStateAction<never[]>= []; if (text.length>0){ matches = users.filter( user => { const regex = new RegExp(`${text}`, 'ig'); return user.coluna_nome.match(regex); }) } setSuggestions(matches) setText(text) } no return user.coluna_nome.match(regex) da erro no .coluna_nome.   o erro é: Property 'coluna_nome' does not exist on type 'never'.ts(2339).
      Sei que é problema de tipagem mas não sei como fazer a tipagem desse item, poderiam me ajudar por favor.
       
      Obs: Quando abro a pagina da erro por causa dessa tipagem, mas eu fecho o erro e funciona certinho!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.