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

Question

我制作了一张循环遍历数据数组的卡片。我添加了一个方法，该方法在数组第 3 html 行内添加了一个对象。

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

我运行遇到的问题是，尽管我的数组是正确的，但我可以看到 last (click)="openSelect(i) 显示在所有问题上。

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

我认为最好的方法可能是一次只允许一个 "Show my objects" 来避免这个问题。任何想法将不胜感激。

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，除了选定的

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

How do I show only one *ngIf="show[i]" at a time

angular

ionic4