1
resposta

Como colocar um input Editável em uma Grid apenas em uma coluna?

Tenho uma Grid com duas colunas uma chamada nome do parametro e a outra valor do parametro. Quero deixar um inputText somente dentro da coluna valor do parametro e a coluna nome do parametro sem, apenas com odado do banco mesmo.Porém ao fazer da forma abaixo ambas as colunas recebem o input.Como limitar isso da forma que esta abaixo?

<tbody>
        <tr *ngFor="let obj of list">
            <td *ngFor="let f of fields">
                <span *ngIf="f['format'] == 'currency'">{{ getShowValue(obj, f['name']) | currency:'BRL':true }}</span>
                <span *ngIf="f['format'] == 'date'">{{ getShowValue(obj, f['name']) | date:'dd/MM/yyyy' }}</span>
                <span *ngIf="f['format'] == 'status'">{{ getShowValue(obj, f['name']) === 'A' ? 'Ativo' : 'Inativo' }}</span>
                <!--<span *ngIf="!f['format']">{{ getShowValue(obj, f) || getShowValue(obj, f['name']) }}</span>-->
                <span *ngIf="!f['format']">
                    <input #editText type="text" value="{{ getShowValue(obj, f) || getShowValue(obj, f['name']) }}">
                </span>
            </td>
        </tr>
    </tbody>

--parametro.component.html--
<div class="animated fadeIn">
    <app-input-inline-pagination 
                              [title]="'Parâmetros'"
                              [idField]="'parametroId'"
                              [editLink]="'../configuracao/parametro-edit'"
                              [resourceUrl]="'v1/parametro'"
                              [header]="['Parâmetro','Valor']"
                              [fields]="[ 
                                          'parametroNome',
                                          'parametroValor'
                                        ]">
    </app-input-inline-pagination>
  </div>

--Component Usado ---

import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core'
import { SortDefinition, SortDirection } from 'app/model/sort-definition.model';

@Component({
    selector: 'app-generic-input',
    templateUrl: './generic-input.component.html'
})
export class GenericInputComponent implements OnInit {
  @Input() list: any[]
  @Input() header: string[]
  @Input() fields: any[]
  @Input() customActions: TemplateRef<any>
  @Input() showRemoveButton = true;
  @Input() idField: string;

  @Output() onEditClicked = new EventEmitter<any>()
  @Output() onDeleteClicked = new EventEmitter<any>()
  @Output() onHeaderClicked = new EventEmitter<SortDefinition[]>()


  currentSort: SortDefinition[] = []
  modulo: string


  public ngOnInit(): void {
    this.modulo = localStorage.getItem('currentModule');
  }

  headerClick(headerText: string, event: any) {
    const fieldName: string = this.getFieldNameForHeader(headerText);

    const existingSort = this.currentSort.find(s => s.sortBy === fieldName);

    if (event.shiftKey) {
      if (window.getSelection) {
        window.getSelection().removeAllRanges();
      }
      if (existingSort) {
        if (existingSort.direction === SortDirection.DESC) {
          const index = this.currentSort.indexOf(existingSort);
          this.currentSort.splice(index, 1);
        } else {
          existingSort.toggleDirection();
        }
      } else {
        const sort = new SortDefinition(fieldName, SortDirection.ASC);
        this.currentSort.push(sort);
      }
    } else {
      if (existingSort) {
        existingSort.toggleDirection();
      } else {
        const sort = new SortDefinition(fieldName, SortDirection.ASC);
        this.currentSort = [];
        this.currentSort.push(sort);
      }
    }

    this.onHeaderClicked.emit(this.currentSort);
  }

  getFieldNameForHeader(headerText: string) {
    const headerIndex = this.header.indexOf(headerText);
    const field = this.fields[headerIndex];
    return typeof field === 'string' ? field : field.name
  }

  edit(obj: any) {
    this.onEditClicked.emit(obj);
  }

  delete(obj: any) {
    this.onDeleteClicked.emit(obj);
  }


  getSortForColumn(column: string): SortDefinition {
    const field = this.getFieldNameForHeader(column)
    const existingSort = this.currentSort.find(s => s.sortBy === field);
    return existingSort;
  }

  getShowValue(obj: any, propName: string) {
    if (propName) {
      const props = propName.split('.');
      if (props.length === 1) {
        return obj[props[0]];
      } else {
        let nested = obj;
        props.forEach(prop => {
          if (nested) {
            nested = nested[prop];
          }
        });
        return nested;
      }
    }
  }
}
1 resposta

Oii Rafael,

você pode tentar usar o atributo contentEditable ao invés de input.

Veja este exemplo: https://codepen.io/vanessametonini/pen/oppJXw

sobre o atributo: https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Content_Editable

Veja se facilita. Bons estudos!