`
<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文件,其中的动画和功能是为按钮展开和折叠而发生的。
我希望每张卡都能单独展开
1条答案
按热度按时间xdyibdwo1#
你有一个大问题,折叠的属性只保存一个布尔值,这对你想要的不起作用。
更简单的解决方案是创建一个名为activeCard的属性(您可以使用index,但我会使用不同的名称),在其中您可以存储当前展开的卡片。
然后,在您的模板中,您会看到如下内容:
这样,就不是存储“折叠”的布尔标志,而是在内存中存储展开的一张卡的索引。