html - Ocultar elemento usando ngFor y ngIf

Quiero ocultar los otros 3 elementos en el elemento li después de que uno de la lista sea clickeado (el elemento de la lista clickeado permanece sin ocultar), ya que al intentarlo oculta todos los elementos li.

pago.componente.ts

  paymentLists = [
    {
      name: 'IpayEasy',
    },
    {
      name: 'Credit Card',
    },
    {
      name: 'Internet Banking',
    },
    {
      name: '7-Eleven',
    },
  ];

  selectedIndex: number;

  select(index:number) {
    this.selectedIndex = index;
  }

pago.componente.html

  <ul *ngIf="selectedIndex == paymentList">
    <li (click)="select(paymentList)" 
      *ngFor="let paymentList of paymentLists; let i=index">
      <span>{{paymentList.name}}</span>
    </li>
  </ul>

Aquí lo que he intentado, demostración

Banca por Internet

Tarjeta de crédito

IpayEasy

Antes :

Después de :

Respuesta #1

Necesitas actualizar tu plantilla de la siguiente manera

• Mover ngFor al elemento ng-container
• Actualiza la condición ngIf para que sea verdadera solo si no hay un índice seleccionado o si coincide con el índice seleccionado
• Pasar índice en la función select

El HTML actualizado será el siguiente

<ul>
   <ng-container *ngFor="let paymentList of paymentLists; let i=index" >
       <li (click)="select(i)"  *ngIf="selectedIndex === undefined || selectedIndex == i" [ngClass]="{'tab__list--selected--mobile': selectedIndex == paymentList}">
          <span>{{paymentList.name}}</span>
       </li>
   </ng-container>
</ul>

Para referencia, aquí está la versión que funciona

Respuesta #2

intentar

  <ul *ngIf="selectedIndex == paymentList">
    <ng-container *ngFor="let paymentList of paymentLists; let i=index">
      <li (click)="select(paymentList)" *ngIf="!selectedIndex || selectedIndex=i">
        <span>{{paymentList.name}}</span>
      </li>
    </ng-container>
  </ul>