CODEWITHSUNDEEP
angularionic4
Thomas Degroot
Thomas Degroot

Reputation: 524

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

I have built a card that loops through an array of data. I added a method that adds an object inside of an array line 3 html.

then I can loop through and view using (click)="openSelect(i)" on line 12 html to view the objects that I have added to the array.

The issue I am running into is even though my array is correct, I can see that last (click)="openSelect(i) display on all questions.

view of questions

When I click Show my objects on question on it shows the proper object for question one but also shows it on question 2 and vice-versa. Below is a picture of my data structure, which works fine just fine.

picture of data structure

I am thinking the best way might be to only allow one "Show my objects" at a time to avoid this problem. Any ideas would be greatly appreciated.

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

Upvotes: 0

Views: 1169

Answers (1)

Eliseo
Eliseo

Reputation: 57939

If you only want to see one, use an unique variable, call it, e.g. indexSelected, so

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

and the *ngIf

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

else you need equal all elements in this.show to false except the selected one

Upvotes: 1

Related Questions