[英]How can I show only the infos of the item when i tap with ngfor and ngif? (Nativescript/Angular)
I want to have a accordion type List in my GridLayout with Nativescript.我想在我的 GridLayout 中使用 Nativescript 有一个手风琴类型列表。 Everything works and the infos show, when i click on one item, but every g Label opens.
一切正常,信息显示,当我点击一个项目时,但每个 g 标签都会打开。 How can i change the infos of the one itam i tapped open?
如何更改我点击打开的一个 itam 的信息?
<ng-container *ngFor="let g of geraetegroessen; let i=index">
<GridLayout rows="auto, auto">
<Label row="0" text="{{g.geraetegroesse}}" class="geraetegroessen" (tap)="collapseInfo(g.geraetegroesseID)"></Label>
<ng-template [ngIf]="showDetails">
<Label row="1" text="Hello" class="geraetegroesseninfos"></Label>
</ng-template>
</GridLayout>
</ng-container>
In the code above you can see the XML and the ng-container.在上面的代码中,您可以看到 XML 和 ng-container。
This is how it looks like, when i tap on one label这是它的样子,当我点击一个标签时
showDetails is false and if someone taps a label it changes the to true with the function: showDetails 是假的,如果有人点击标签,它会使用以下函数将 更改为真:
collapseInfo(args) {
console.log("Gerätegröße: " + args);
this.showDetails = !this.showDetails;
}
I am struggling.我在挣扎。 Can someone help?
有人可以帮忙吗?
All items expand even though you only want the item you clicked on to expand.即使您只希望您单击的项目展开,所有项目也会展开。 This is because the variable that holds the state (expanded, collapsed) is the same for all your items.
这是因为保存状态(展开、折叠)的变量对于您的所有项目都是相同的。
A possible approach here would be to persist the state for each individual item.这里一种可能的方法是为每个单独的项目保持状态。 Then, by clicking on an item, the state of that item could be changed.
然后,通过单击一个项目,可以更改该项目的状态。 Since only the state of one item would be changed, the remaining items would remain collapsed.
由于只会更改一项的状态,因此其余项目将保持折叠状态。 Each item in
geraetegroessen
would then have its own showDetails
, and you could do something like this: geraetegroessen
每个项目都有自己的showDetails
,您可以执行以下操作:
<ng-container *ngFor="let g of geraetegroessen; let i=index">
<GridLayout rows="auto, auto">
<Label row="0" text="{{g.geraetegroesse}}" class="geraetegroessen" (tap)="g.showDetails = !g.showDetails"></Label>
<ng-template [ngIf]="g.showDetails">
<Label row="1" text="Hello" class="geraetegroesseninfos"></Label>
</ng-template>
</GridLayout>
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.