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;
}
}
}
}