在 Angular HTML 中动态添加翻转卡片

Posted 2023-02-23

【中文标题】在 Angular HTML 中动态添加翻转卡片

【英文标题】：Dynamically adding flip cards in Angular HTMl

【发布时间】：2020-03-14 03:07:00

【问题描述】：

我正在从我的数据库中检索项目列表。我想生成与从数据库中检索到的元素数量一样多的翻转卡片。有没有办法在每张卡片上动态添加带有相应项目标签的翻转卡片？

这是当前代码：

records.component.html

<app-card></app-card>

records.component.ts

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-records',
  templateUrl: './records.component.html',
  styleUrls: ['./records.component.scss']
)
export class RecordsComponent implements OnInit 

  constructor()  

  ngOnInit() 
  

card.component.html

<div class="tp-wrapper">
	<div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
		<div class="tp-box__side tp-box__front">
            <label style="color: lawngreen;">Institute Name</label>
            <label style="color: lawngreen;">Date of Visit</label>
		</div>
		<div class="tp-box__side tp-box__back">
            <label style="color: lawngreen;">Prescription</label>
            <label style="color: lawngreen;">Medicine</label>
            <label style="color: lawngreen;">Type</label>
            <label style="color: lawngreen;">Duration</label>
            <label style="color: lawngreen;"> Per day</label>
		</div>
	</div>
</div>

card.component.ts

import  Component, OnInit  from '@angular/core';
import  trigger, state, style, transition, animate  from '@angular/animations';


@Component(
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  animations: [
    trigger('flipState', [
      state('active', style(
        transform: 'rotateY(179deg)'
      )),
      state('inactive', style(
        transform: 'rotateY(0)'
      )),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in'))
    ])
  ]
)
export class CardComponent implements OnInit 

  constructor()  

  ngOnInit() 
  

  flip: string = 'inactive';

  toggleFlip() 
    this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
  

在记录页面中，我希望根据我从数据库中检索的项目数[作为列表检索]动态添加卡片。

【问题讨论】：

为什么不直接使用 *ngFor？

【参考方案1】：

在您的RecordsComponent 中，添加一个属性，该属性包含具有相应属性的卡片对象数组，例如：

cards = [ id: 1, label: 'First Card',  id: 2, label: 'Second Card',  id: 3, label: 'Third Card'];

从数据库中检索属性后，您可以使用服务调用或任何其他您需要的方式更新属性。

像这样更改RecordsComponent 模板：

<app-card *ngFor="let card of cards" [label]="card.label"></app-card>

[title]="card.label" 是您的 AppCard 组件的输入，您需要在类中定义：

export class CardComponent implements OnInit 
...
@Input label: string;
...

然后在你的模板中：

<div class="tp-wrapper">
	<div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
        ...
        <div> label <div>
        ...
	</div>
</div>

您可以将整个对象传递到输入中，而不仅仅是label，在这种情况下，您的属性将被称为card，然后您可以在模板中访问属性，如 card.title card.id 等.

【讨论】：

我已经尝试过您的建议，但卡片无法加载，并且我收到一个空白页。这是代码stackblitz.com/edit/angular-mqhz44的链接，请纠正我的错误。

你的回答帮助了我..非常感谢。 ！但我有一个小问题......我已将卡片如何在屏幕上显示的图像附加到上述问题中。你能建议我一种从边缘开始以连续形式显示它们的方法吗？

@AkhileshPothuri 请删除屏幕截图并发布一个单独的问题，因为这是一个不同的主题。谢谢！

【参考方案2】：

请通过实现 OnInit 接口在 ngOnInit 方法中初始化您的卡片。

constructor()
  cards: any; 
  ngOnInit() 
    this.cards = [ id: 1, title: 'First Card',  id: 2, title: 'Second Card',  id: 3, title: 'Third Card'];