Question

我已经建立了一个可遍历数据数组的卡。我添加了一种在数组第3行html内添加对象的方法。

然后，我可以遍历并查看HTML 12行上的（click）=“ openSelect（i）”以查看已添加到数组的对象。

我遇到的问题是即使我的数组正确，我也可以在所有问题上看到最后一个（click）=“ openSelect（i）。

当我单击“在问题上显示我的对象”时，它会显示问题1的正确对象，但也会在问题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，但所选元素除外

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

1 个答案: