Angular 如何在*ngFor循环上打开单个*ngIf div

我已经用*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>

这是目前我的.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();
    }
  }

---

您需要做的基本工作是将

show

转换为布尔值字典，并使用打开字典中的一个布尔值。并在

*ngIf

TS

show:{[key:number]：boolean}={}；
构造函数（私有存储：存储）{this.audit=[]；}
openSelect（索引：编号）{
this.show[index]=true；
}

HTML

...
... 
...

我认为您需要详细阐述并明确说明。是不是如果你试图显示一张卡片上的答案，其他卡片上的答案也会显示出来？

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();
    }
  }