Как создать карточку материала по нажатию кнопки? - PullRequest
Новая
       6

Как создать карточку материала по нажатию кнопки?

0 голосов
/ 14 января 2019

Я пытаюсь создать мат-карты при нажатии на кнопку.

Это информация, которая должна быть на мат-карте (эта информация поступает из службы). 

blockHash: "iejg5gpylg6l9gjxor3bnvigs0ipaonr"

blockNumber: 1

previousBlock: "00000000000000000000000000000000"

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

В начале раздел, где находятся матовые карты, должен быть полностью пустым. При нажатии на кнопку этот раздел должен быть заполнен одной мат-картой; при повторном нажатии должна появиться вторая мат-карта и т. д.

Это блок с информацией (в другом компоненте), который отправляется компоненту, который должен сложить карточки материалов.

enter image description here

Вот как это должно выглядеть (на данный момент это просто закодировано).

enter image description here

Какой элегантный способ сделать это?

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Вы должны создать parent-component, который отображает несколько card-components.

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

родитель-компонент

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>

код 

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() {
  }

}
0 голосов
/ 14 января 2019

Возможно, вы используете список, но я не уверен, как сделать его горизонтальным, так что это может потребовать некоторых настроек.

Но, я бы сказал, список перетаскивания также будет очень уместным. Документация легко описывает, как применять их с горизонтальным видом. Но если функция перетаскивания не для вас, перейдите к списку.

Используя любой из них, вы можете запустить цикл * 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 и связать данные в соответствии с вашим именем.

Чтобы добавить новые карточки с помощью кнопки, вам просто нужно добавить новый элемент в массив, который вы зациклите, и он появится, когда он будет добавлен.

...