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, 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，然后在模板中可以像这样{{1 }} {{ card.title }}等

Answer 2

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

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

在Angular HTMl中动态添加翻页卡

2 个答案: