如何一次只顯示一個 *ngIf=“show[i]”

Question

我已經構建了一張循環數據數組的卡片。 我添加了一種在陣列線 3 html 內添加 object 的方法。

然后我可以循環並使用第 12 行 html 上的 (click)="openSelect(i)" 來查看我添加到數組中的對象。

我遇到的問題是即使我的數組是正確的，我也可以看到最后一個 (click)="openSelect(i) 顯示在所有問題上。

當我單擊在問題上顯示我的對象時，它會顯示問題一的正確 object，但也會在問題 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，但所選元素除外