当我点击 ngfor 和 ngif 时，如何仅显示项目的信息？ （本机脚本/角）

Question

我想在我的 GridLayout 中使用 Nativescript 有一个手风琴类型列表。 一切正常，信息显示，当我点击一个项目时，但每个 g 标签都会打开。 如何更改我点击打开的一个 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>

在上面的代码中，您可以看到 XML 和 ng-container。

封闭标签

这是它的样子，当我点击一个标签时

showDetails 是假的，如果有人点击标签，它会使用以下函数将 更改为真：

collapseInfo(args) {
    console.log("Gerätegröße: " + args);
    this.showDetails = !this.showDetails;
}

我在挣扎。 有人可以帮忙吗？

Answer 1

即使您只希望您单击的项目展开，所有项目也会展开。 这是因为保存状态（展开、折叠）的变量对于您的所有项目都是相同的。

这里一种可能的方法是为每个单独的项目保持状态。 然后，通过单击一个项目，可以更改该项目的状态。 由于只会更改一项的状态，因此其余项目将保持折叠状态。 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>