当我点击 ngfor 和 ngif 时，如何只显示项目的信息？ (Nativescript/Angular)

Question

我想在我的带有 Nativescript 的 GridLayout 中有一个手风琴类型列表。一切正常，信息显示，当我点击一个项目时，每个 g 标签都会打开。如何更改我点击打开的那个项目的信息？

<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。

Closed Labels

This is how it looks like, when i tap on one label

showDetails 为 false，如果有人点击标签，它会使用函数将其更改为 true：

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>

当我点击 ngfor 和 ngif 时，如何只显示项目的信息？ (Nativescript/Angular)

How can I show only the infos of the item when i tap with ngfor and ngif? (Nativescript/Angular)

typescript

nativescript

angular