как открыть один * ngIf div в * ngFor Loop

Question

Я создал список карточек, используя * ngFor

<ion-card *ngFor="let item of audit">
  <ion-card-header>
    <ion-card-title>Question {{ item.questionnumber }}</ion-card-title>
  </ion-card-header> 
  <ion-card-content>
    {{ item.question }}
  </ion-card-content>

  <div class="contact-content">
      <ion-button class = "success" size="small" fill="outline" ><ion-icon slot="icon-only"></ion-icon>Compliant</ion-button>
      <ion-button class = "negitive" size="small" fill="outline" (click)="openSelect()"><ion-icon slot="icon-only"></ion-icon>Non-compliant</ion-button>
  </div>

  <div *ngIf="show">
      <p >Show only dropdownnfo: 'one' or dropdownnfo: 'one' depending on card</p>
  </div>

, что я хочу сделать, когда я выбираю кнопку «Не соответствует», я хочу открыть * ngIf = "show" div длятолько эта карта, а не все карты в списке.это массив, который я использую.В основном только dropdownnfo: «one» будет отображаться, когда я выбрал первую карту, и ничего не будет отображаться под второй картой и наоборот.

  "test": [
    { questionNumber: '1', type: 'select', question: 'What is your name. ', dropdowninfo: 'one', id: '1' },
    { questionNumber: '2',type: 'select', question: 'What is your age ?', dropdowninfo: 'Two', id: '2' }
  ]

В настоящее время это то, что у меня есть в моем файле .ts

import { Component, OnInit , ViewChild } from '@angular/core';
import { Storage } from '@ionic/storage';

  @Component({
    selector: 'app-side-formlist',
    templateUrl: './side-formlist.page.html',
    styleUrls: ['./side-formlist.page.scss'],
  })
  export class SideFormlistPage implements OnInit {
    auditResults: any;
    auditListResults: any;
    audit: any[];

  show: boolean = false

  constructor( private storage: Storage ) { this.audit = []; }

  openSelect() {
    this.show = true;
  }

  getAuditForm() {
    this.storage.get('test').then((value) => {
      this.auditResults = JSON.parse(value);
      this.audit = this.auditResults.compliant;
      console.log('audit results',this.audit );
    });
  }

    ngOnInit() {
      this.getAuditForm();
    }
  }

Answer 1

Основное, что вам нужно сделать, это превратить show в словарь логических значений и использовать значение index, предоставленное *ngFor, чтобы включить 1 из логических значений всловарь.И повторно использовать show[index] внутри *ngIf

TS

  show: {[key: number]: boolean} = {};

  constructor( private storage: Storage ) { this.audit = []; }

  openSelect(index: number) {
    this.show[index] = true;
  }

HTML

<ion-card *ngFor="let item of audit; index as i;">
   ...
      <ion-button ... (click)="openSelect(i)"> ... </ion-button>

  <div *ngIf="show[i]">
      ...
  </div>
</ion-card>