Как активировать ионное переключение в соответствии с переданным идентификатором?

Question

У меня есть количество сообщений, и я должен активировать переключатель, чтобы просмотреть только те, которые нажал пользователь. Но когда нажата кнопка одного сообщения, кнопка каждого сообщения активна, хотя и не обновляется в базе данных.

    <p class="font">
           <strong>Space Type:&nbsp;</strong>{{ post.AvailableSpace.Space.SpaceTypeName }}
                <br> <strong>Address:&nbsp;</strong> {{ post.AvailableSpace.Address}}
                <br><strong>Price:&nbsp;</strong> {{ post.AvailableSpace.Price }} {{ post.AvailableSpace.PriceType.PriceTypeName}}
                <br><strong>No of available rooms:&nbsp;</strong> {{post.AvailableSpace.NoOfRooms}}
                <br>
    </p>

Answer 1

Вы должны использовать *ngFor и ngClass для простого способа переключения чего-либо.

файл.ts

  examples: any = [];
  toggleSection(i) {
    this.examples[i].open = !this.examples[i].open;
    }

HTML-файл

<ion-list *ngFor="let item of examples; let i = index">
<ion-item  (click)="toggleSection(i)" [ngClass]="{'section-active': item.open}">
</ion-item>
<ion-card *ngIf="item.open"> Hello </ion-card>
</ion-list>