[英]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.
我添加了一种在阵列线 3 html 内添加 object 的方法。
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.然后我可以循环并使用第 12 行 html 上的 (click)="openSelect(i)" 来查看我添加到数组中的对象。
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.我遇到的问题是即使我的数组是正确的,我也可以看到最后一个 (click)="openSelect(i) 显示在所有问题上。
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.当我单击在问题上显示我的对象时,它会显示问题一的正确 object,但也会在问题 2 上显示它,反之亦然。 Below is a picture of my data structure, which works fine just fine.
下面是我的数据结构的图片,它工作得很好。
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 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 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);
}
If you only want to see one, use an unique variable, call it, eg indexSelected
, so如果您只想查看一个,请使用唯一变量,调用它,例如
indexSelected
,所以
openSelect(index: number) {
this.indexSelected=index; //<--here
this.findingForm = this.dataAuditNestedService.auditFormFinding.Questions[index].finding;
}
and the *ngIf和 *ngIf
<div *ngIf="i==indexSelected">
else you need equal all elements in this.show to false except the selected one否则,您需要将 this.show 中的所有元素都设置为 false,但所选元素除外
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.