typescript Angular *Ngfor如何一次仅扩展一个卡

m528fe3b 于 2022-11-30 发布在 TypeScript

关注(0)|答案(1)|浏览(136)

`

<h1 style="margin-top: 24px"> Report</h1>
<mat-card class="mat-cards" *ngFor="let Nutrition of Nutrition; let i = index">
    <mat-card-header>
        <mat-card-title
            ><h2>{{ Nutrition.name }}</h2></mat-card-title>
        <mat-card-subtitle class="data">{{ Nutrition.data }}</mat-card-subtitle>
        <mat-card-subtitle class="goal-range">{{ Nutrition.goalRange }}</mat-card-subtitle>
        <div class="column1">
            <mat-list role="list">
                <mat-list-item role="listitem" class="first-item">
                    <h3 matLine class="previous">Previous Values</h3>
                    <p class="prev" matLine style="font-size: 16px">
                        {{ Nutrition.previousValue }}
                    </p>
                    <p class="prev" matLine style="font-size: 16px">
                        {{ Nutrition.previousvalue1 }}
                    </p>
                    <p class="prev" matLine style="font-size: 16px">
                        {{ Nutrition.previousvalue2 }}
                    </p>
                </mat-list-item>
            </mat-list>
        </div>
    </mat-card-header>
    <div class="Content">
        <mat-card-content>
            <div [@collapse]="collapsed" class="expandable-content" *ngIf="i === index">
                <div class="column2">
                    <mat-list role="list" class="table-column" style="">
                        <mat-list-item role="listitem" class="first-item">
                            <h3 class="notes" matLine>{{ Nutrition.notes }}</h3>
                            <p class="description" matLine style="font-size: 16px w">
                                {{ Nutrition.Description }}
                            </p>
                        </mat-list-item>
                    </mat-list>
                    <mat-list role="list" class="table-column" style="" *ngIf="i === index">
                        <mat-list-item role="listitem" class="first-item">
                            <h3 class="related" matLine>Content</h3>
                        </mat-list-item>
                        <ul>
                          <li>{{Nutrition.related}}</li>
                          <li>{{Nutrition.related1}}</li>
                      </ul>
                    </mat-list>
                </div>
            </div>
        </mat-card-content>
        <mat-divider></mat-divider>
    </div>
    <mat-card-actions >
        <button *ngIf="collapsed" (click)="expand(i)" class="mat-button">Expand</button>
        <button *ngIf="!collapsed" (click)="collapse(i)" class="mat-button" >Collapse</button>
    </mat-card-actions>
</mat-card>

'当一张牌展开时，按钮将从折叠切换，并且当选择一张牌时，每张牌都受另一张牌的影响。如果您展开一张牌，关闭的牌在关闭时将显示折叠。'

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
import { Nutrition } from './NutritionData';

const DEFAULT_DURATION = 200;
@Component({
    selector: 'app-nutrition-report',
    templateUrl: './nutrition-report.component.html',
    styleUrls: ['./nutrition-report.component.scss'],
    animations: [
        trigger('collapse', [
            state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
            state('true', style({ height: '0', visibility: 'hidden' })),
            transition('false => true', animate(DEFAULT_DURATION + 'ms ease-in')),
            transition('true => false', animate(DEFAULT_DURATION + 'ms ease-out')),
        ])
    ]
})
export class NutritionReportComponent implements OnInit {
    Nutrition;
    index;
    collapsed = true;

    constructor() {
        this.Nutrition = Nutrition;
    }

    toggle(index) {
        this.collapsed = !this.collapsed;
        this.index = index;
    }

    expand(index) {
        this.collapsed = false;
        this.index = index;
    }

    collapse(index) {
        this.collapsed = true;
        this.index = index;
    }
    ngOnInit(): void {}
}

这是一个Ts文件，其中的动画和功能是为按钮展开和折叠而发生的。
我希望每张卡都能单独展开

typescript

来源：https://stackoverflow.com/questions/74607596/angular-ngfor-how-to-expand-only-one-card-at-a-time

1条答案

按热度按时间

xdyibdwo1#

你有一个大问题，折叠的属性只保存一个布尔值，这对你想要的不起作用。
更简单的解决方案是创建一个名为activeCard的属性（您可以使用index，但我会使用不同的名称），在其中您可以存储当前展开的卡片。

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
import { Nutrition } from './NutritionData';

const DEFAULT_DURATION = 200;
@Component({
    selector: 'app-nutrition-report',
    templateUrl: './nutrition-report.component.html',
    styleUrls: ['./nutrition-report.component.scss'],
    animations: [
        trigger('collapse', [
            state('false', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
            state('true', style({ height: '0', visibility: 'hidden' })),
            transition('false => true', animate(DEFAULT_DURATION + 'ms ease-in')),
            transition('true => false', animate(DEFAULT_DURATION + 'ms ease-out')),
        ])
    ]
})
export class NutritionReportComponent implements OnInit {
    Nutrition;
    activeCard;

    constructor() {
        this.Nutrition = Nutrition;
    }

    expand(index) {
        this.activeCard = index;
    }

    collapse(index) {
        this.activeCard = null;
    }

    isCardActive(index) {
      // If activeCard is null or undefined this method will allways return false.
      return this.activeCard && this.activeCard === index;
    }
    ngOnInit(): void {}
}

然后，在您的模板中，您会看到如下内容：

<mat-card>
    .
    .
    .
    <div class="Content">
    <mat-card-content>
        <div [@collapse]="!isCardActive(index)" class="expandable-content" *ngIf="i === index">
        .
        .
        .
        </div>
        </mat-card-content>
        <mat-divider></mat-divider>
    </div>
    <mat-card-actions >
        <button *ngIf="!isCardActive(index)" (click)="expand(i)" class="mat-button">Expand</button>
        <button *ngIf="isCardActive(index)" (click)="collapse(i)" class="mat-button" >Collapse</button>
    </mat-card-actions>
</mat-card>

这样，就不是存储“折叠”的布尔标志，而是在内存中存储展开的一张卡的索引。

赞(0）回复(0）举报 2022-11-30

我来回答

typescript Angular *Ngfor如何一次仅扩展一个卡

1条答案

相关问题

热门标签

最新问答