Cómo agregar condiciones en un objeto JSON estático utilizando TypeScript.
Estoy trabajando en una aplicación en la que creé una matriz de objetos JSON estáticos que contiene datos de padre e hijo. Estoy mostrando esos datos en una lista desplegable y lo que quiero lograr aquí es que tengo diferentes registros cuyo estado será diferente, como completado, cancelado u otros. Solo quiero mostrar u ocultar opciones de la lista desplegable usando estos estados. Aquí está mi código JSON.
exportación const projectCardVerticalDropdown = [
{
nameSub: ‘Información’,
children: [
{
icono: ‘i-expandir’,
nombre: ‘Ver proyecto ampliado’,
código: 1,
},
],
},
{
nameSub: ‘Calendario’,
children: [
{
icono: ‘i-más’,
nombre: ‘agregar una nueva tarea’,
código: 2,
},
{
icono: ‘i-calendar-week’,
nombre: ‘ver calendario’,
código: 3,
},
],
},
{
nameSub: ‘Plantillas de proyectos’,
children: [
{
icono: ‘i-copia-1’,
nombre: ‘Clonar proyecto’,
código: 4,
},
{
icono: ‘i-project_stage_initiation’,
nombre: ‘Crear plantilla a partir de proyecto’,
código: 5,
},
{
icono: ‘i-recieved_files2’,
nombre: ‘Aplicar plantilla a este proyecto’,
código: 6,
},
],
},
{
nameSub: ‘Datos’,
children: [
{
icono: ‘i-file-invoice-1’,
nombre: ‘ver propuesta’,
código: 7,
},
{
icono: ‘i-imágenes’,
nombre: ‘Ver fotos del proyecto’,
código: 8,
},
{
icono: ‘i-mail_attachment’,
nombre: ‘Ver archivos de proyecto’,
código: 9,
},
],
},
{
nameSub: ‘Editar’,
children: [
{
icono: ‘i-check_mark’,
nombre: ‘marcar proyecto como completo’,
código: 10,
},
{
icono: ‘i-editar’,
nombre: ‘Editar detalles del proyecto’,
código: 11,
},
],
},
];
Aquí está mi código Html y ts
verticalDropDownListData = projectCardVerticalDropdown;
{{item.nameSub}}
Necesito agregar una comprobación para mostrar u ocultar opciones en la matriz de objetos JSON.
davy.ai
Puede agregar una propiedad “estado” a cada objeto hijo en la matriz JSON y establecer el valor como “completado”, “cancelado” o cualquier otro estado. Luego, en el código HTML, puede usar la directiva * ngIf para mostrar u ocultar las opciones según la propiedad de estado. Aquí hay un ejemplo:
Código JSON:
export const projectCardVerticalDropdown = [
{
nameSub: ‘Información’,
children: [
{
icon: ‘i-expand’,
name: ‘Ver proyecto ampliado’,
code: 1,
status: ‘completado’
},
],
},
…
Código HTML:
{{ item.nameSub}}
(click) = “selectedDropdownListData(items.code,cloneModal, project)”>
{{items.name}}
En este ejemplo, la opción con el valor de estado “cancelado” se ocultará de la lista desplegable. Puede modificar la condición * ngIf para mostrar u ocultar opciones según cualquier valor de estado que desee.