在Angular HTM1中动态添加翻页卡

Question

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

这里是当前代码：

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';
  }

}

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

Answer 1

[在您的RecordsComponent中，添加一个属性，其中包含卡片对象的数组：

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

您可以通过服务呼叫或所需的任何其他方式来更新属性。

像这样更改RecordsComponent模板：

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

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

export class CardComponent implements OnInit {
...
@Input title: string;
...

然后在您的模板中：

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