如何在 ngFor 循环中打开单个 ngIf div

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>

我想做的是当我 select 不合规按钮时，我只想打开该卡的 *ngIf="show" div 而不是所有清单上的卡片。这是我使用的数组。基本上只有 dropdownnfo: 'one' 会在我 select 编辑第一张卡片时显示，而第二张卡片下不会显示任何内容，反之亦然。

  "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 变成布尔值字典，然后使用 the index value provided by *ngFor 打开字典中的布尔值之一。并重复使用 *ngIf

中的 show[index]

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>

如何在 ngFor 循环中打开单个 ngIf div

how do I open an a single ngIf div on ngFor Loop

angular

ionic4

TS

HTML

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

how do I open an a single *ngIf div on *ngFor Loop

angular

ionic4

TS

HTML

如何在 ngFor 循环中打开单个 ngIf div

how do I open an a single ngIf div on ngFor Loop