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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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