當我點擊 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>