如何一次只显示一个 *ngIf="show[i]"

Question

我已经构建了一个循环遍历数据数组的卡片。我添加了一个在数组第 3 行 html 中添加对象的方法。

然后我可以循环并使用第 12 行 html 上的 (click)="openSelect(i)" 来查看我添加到数组中的对象。

我遇到的问题是，即使我的数组是正确的，我也可以看到 last (click)="openSelect(i) 显示在所有问题上。

当我单击在问题上显示我的对象时，它会显示问题一的正确对象，但也会在问题 2 上显示它，反之亦然。下面是我的数据结构的图片，效果很好。

我认为最好的方法可能是一次只允许一个“显示我的对象”以避免此问题。任何想法将不胜感激。

html

<ion-card *ngFor="let item of form; let i=index;">

  <ion-button (click)="addNewOjecttoFindingArray(i)" expand="full" color="primary">Add New Question Object to Array</ion-button><br> <!--add new object to finding array.-->

  <ion-card-content>
    <div class="question">
        {{ item.Question }}
    </div>

    <ion-radio-group name="{{item.RadioCompliantName}}" [(ngModel)]="form[i].RadioCompliantInput">            
      <ion-row class="radio-tags">
        <ion-item class="radio-tagtwo" lines="none">
          <ion-label class="tag-label">Show my objects</ion-label>
          <ion-radio value="non-compliant" (click)="openSelect(i)"></ion-radio>
        </ion-item>
      </ion-row>
    </ion-radio-group>


    <div *ngIf="show[i]"> <!--show finding array associated with this question.-->
        <ion-card *ngFor="let itemNew of findingForm; let n=index;"> <!--loop through arrays -->
        <ion-item>
          <ion-label position="floating" >{{itemNew.text_name}}</ion-label>
          <ion-textarea name="{{itemNew.text_name}}" [(ngModel)]="findingForm[n].text_input"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label position="floating" >{{itemNew.TextFindingDiscName}}</ion-label>
          <ion-textarea name="{{itemNew.TextFindingDiscName}}" [(ngModel)]="findingForm[n].TextFindingDiscInput"></ion-textarea>
        </ion-item>
      </ion-card> 
    </div>
  </ion-card-content>
</ion-card>  

ts

openSelect(index: number) {
  this.show[index] = true;
  this.findingForm = this.dataAuditNestedService.auditFormFinding.Questions[index].finding;
}



addNewOjecttoFindingArray (index: number) {
  this.findingForm = this.dataAuditNestedService.auditFormFinding.Questions[index].finding;
  let num = Math.floor(Math.random() * 100);
  let obj = 
    { 
      text_input: "",
      text_name: "test" + num,
      TextFindingDiscName: "textFinding" + num,
      TextFindingDiscInput: "",
    }  
  this.findingForm.push(obj);
  console.log("form", this.form);
}

Answer 1

如果您只想查看一个，请使用唯一变量，调用它，例如indexSelected，所以

openSelect(index: number) {
  this.indexSelected=index; //<--here
  this.findingForm = this.dataAuditNestedService.auditFormFinding.Questions[index].finding;
}

和 *ngIf

<div *ngIf="i==indexSelected"> 

否则，您需要将 this.show 中的所有元素设为 false，但所选元素除外