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

Question

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

这是信息，该信息应该在密码卡中（此信息来自服务）。

blockHash: "iejg5gpylg6l9gjxor3bnvigs0ipaonr"

blockNumber: 1

previousBlock: "00000000000000000000000000000000"

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

开始时，垫卡所在的部分应完全为空。单击按钮时，该部分应装有一张席子卡；再次单击时，应显示第二张Mat卡，依此类推。

这是带有信息的块（位于另一个组件中），该信息被发送到该组件，该组件应将物料卡加起来。

这是它的外观（目前只是硬编码）。

这样做有什么优雅的方法？

Answer 1

您应该创建一个显示多个parent-component的{​​{1}}。

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

父级组件

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

模板

card-component

代码

<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

代码

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

Answer 2

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

但是，我想说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中应用名片模板，并将数据相应地绑定到您的命名。

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