1

Alguien es tan amable de darme una idea en Angular de como puedo mostrar o dejar de mostrar un registro que estoy cargando por medio de un json de la siguiente manera: Tengo un archivo json externo donde tengo los nombres de las app que quiero mostrar:

  "appList": [
    {
        "nameAvatar": "Gestión de Solicitudes",
        "popoverMessage": "El tiempo de respuesta a tus usuarios determina la posibilidad de que te vuelvan a comprar y recomendar. Mejora la experiencia y comunicación con tus clientes.",
        "popoverTitle": "Gestión de Solicitudes",
        "icon": "assets/images/icons/Icon_GDS2.png",
        "placement": "bottom",
        "linkApp": "http://localhost:4500/login",
        "activeLink": true,
        "appId": 1,
        "activeModule": true
      },
      {
        "nameAvatar": "Gestión de Activos",
        "popoverMessage": "Con helppeople puedes estar tranquilo el día que tengas una auditoria, pues nuestro modulo de Gestión de Activos te permite tener el control de ABSOLUTAMENTE TODO.",
        "popoverTitle": "Gestión de Activos",
        "icon": "assets/images/icons/Icon_GDA2.png",
        "placement": "bottom",
        "linkApp": "http://localhost:4100/activos#/login",
        "activeLink": true,
        "appId": 2,
        "activeModule": true
      } ]

Luego recorro la información en el HTML para que se vaya mostrando.

 <div class="col d-flex flex-column"  *ngFor="let item of appsList">
            <a         
            (click)="openLink(item)"
            target="_self"
            rel="noopener noreferrer"
          >
            <app-custom-popover
              [popoverMessage]="item.popoverMessage"
              [popoverTitle]="item.popoverTitle"
              [sizeAvatar]="150"
              [containAvatar]="true"
              [openDelay]="100"
              [closeDelay]="300"
              [iconAvatar]="item.icon"
              [placement]="item.placement"
            >
            </app-custom-popover>
          </a>
        </div>
       </div>

Le asigné un atributo appId y activeModule para mirar la manera de un condicional, sin embargo, no se como hacerlo. Gracias.

1 respuesta 1

1

Tienes varias formas de hacerlo:

Una sería prefiltrando la lista dentro del código del componente que sería la que finalmente uses dentro del template:

filteredAppList = this.appList.filter(item => item.activeModule);

Y luego en el template usar esa variable en lugar de la original:

<div class="col d-flex flex-column"  *ngFor="let item of filteredAppList">
            <a         
            (click)="openLink(item)"
            target="_self"
            rel="noopener noreferrer"
          >
            <app-custom-popover
              [popoverMessage]="item.popoverMessage"
              [popoverTitle]="item.popoverTitle"
              [sizeAvatar]="150"
              [containAvatar]="true"
              [openDelay]="100"
              [closeDelay]="300"
              [iconAvatar]="item.icon"
              [placement]="item.placement"
            >
            </app-custom-popover>
          </a>
        </div>
       </div>

Otra forma de hacerlo sería moviendo el *ngFor a un ng-container por encima, y usando un *ngIf para controlar cuando quieres que se muestre. El ng-container te permite utilizar una directiva como el ngFor sin necesidad de crear un elemento Html real:

<ng-container *ngFor="let item of appList">
  <div class="col d-flex flex-column" *ngIf="item.activeModule">
         <a         
            (click)="openLink(item)"
            target="_self"
            rel="noopener noreferrer"
          >
            <app-custom-popover
              [popoverMessage]="item.popoverMessage"
              [popoverTitle]="item.popoverTitle"
              [sizeAvatar]="150"
              [containAvatar]="true"
              [openDelay]="100"
              [closeDelay]="300"
              [iconAvatar]="item.icon"
              [placement]="item.placement"
            >
            </app-custom-popover>
          </a>
  </div>
</ng-container>

Espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.