如何在按钮单击时创建材料卡？

Question

我正在尝试在单击按钮时创建垫卡。

这是应该在 mat-card 中的信息（此信息来自服务）。

blockHash: "iejg5gpylg6l9gjxor3bnvigs0ipaonr"

blockNumber: 1

previousBlock: "00000000000000000000000000000000"

transactions: Array (1)
0 {sender: "10", recipient: null, amount: null, fee: null}

在该部分的开头，垫卡所在的位置应该是完全空的。单击按钮时，该部分应填充一张垫卡；再次点击时，应该会出现第二张 mat-card，依此类推。

这是带有信息的块（在另一个组件中），它被发送到组件，该组件应该添加材料卡。

这就是它的样子（目前只是硬编码）。

有什么优雅的方法可以做到这一点？

Answer 1

您可能正在使用列表，但我不确定如何使其水平，因此可能需要进行一些调整。

但是，我想说drag and drop list 也非常合适。 文档很容易地描述了如何在水平视图中应用这些。但是，如果拖放功能不适合您，那么请使用列表。

使用任何一种方法，您都可以运行 *ngFor 循环，该循环可以对数据数组执行。

这样的例子：

    <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" 
    (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let card of cardArray" cdkDrag>
        <mat-card class="example-card">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>Shiba Inu</mat-card-title>
            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
          <mat-card-content>
            <p>
             text
            </p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>LIKE</button>
            <button mat-button>SHARE</button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>

在您的情况下，您必须在 *ngFor div 中应用卡片模板，并将数据相应地绑定到您的命名。

要通过按钮添加新卡片，您只需将一个新元素添加到您循环的数组中，它会在添加后出现。

Answer 2

您应该创建一个显示多个card-components 的parent-component。

https://stackblitz.com/edit/angular-zvjblo

父组件

parent-component 保存您的块列表，并通过为每个 card-component 提供该卡的块数据来显示多个 card-components。还有一个按钮可以将新块添加到列表中。

模板

<button (click)="addCard()">Add Card</button>
<app-block-card *ngFor="let block of blocks" [blockData]="block"></app-block-card>

代码

import { Component, OnInit } from '@angular/core';
import { BlockData } from './block-data';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  blocks: BlockData[];

  ngOnInit() {
    this.blocks = [];
  }

  addCard() {
    this.blocks.push({
      blockHash: '9348534985720587',
      blockNumber: 3,
      previousBlock: "0000",
      transactions: [
        {
          sender: 'sender',
          recipient: 'recipient',
          amount: 1,
          fee: 200
        }
      ]
    });
  }

}

卡片组件

card-component从父组件接收一个block的数据并显示出来。

模板

<mat-card class="card">
  <p>{{blockData.blockHash}}</p>
  <p>{{blockData.blockNumber}}</p>
  <p>{{blockData.previousBlock}}</p>
  <p>{{blockData.transactions | json}}</p>
</mat-card>

代码

import { Component, OnInit, Input } from '@angular/core';
import { BlockData } from '../block-data';

@Component({
  selector: 'app-block-card',
  templateUrl: './block-card.component.html',
  styleUrls: ['./block-card.component.css']
})
export class BlockCardComponent implements OnInit {

  @Input() blockData: BlockData;

  constructor() { }

  ngOnInit() {
  }

}