Как передать источник данных в качестве ввода в Angular? - PullRequest
Новая
       78

Как передать источник данных в качестве ввода в Angular?

0 голосов
/ 01 марта 2019

У меня есть компонент, который отображает 10 карт материалов.Все эти карты должны содержать различную информацию.Все это работает, кроме последней вещи в карточках: транзакций.Я пытаюсь реализовать это с помощью декоратора @Input().Но компонент с оператором @Input() не получает никакой информации.Я уже пытался реализовать связь между двумя компонентами с помощью службы.Но затем все карты получили одинаковые транзакции в своей таблице.Поэтому я пытаюсь реализовать это с @Input() прямо сейчас, чтобы посмотреть, работает ли он таким образом.

После некоторого кода:

Miner-view.component: Когда я нажимаю на флажок, он должен добавить транзакцию к текущей карте.Это когда подписка вызывается, как вы можете видеть.this.blocks[this.minerCounter] отображает информацию блоков от 1 до 10, в зависимости от значения minerCounter.Когда я регистрирую значение this.blocks[this.minerCounter].dataSource.data, я получаю правильную информацию.Но компонент с декоратором `@Input () 'не получает никакой информации. 

  blocks: Block[] = [];
  blockHash = this.generateFirstHash(); // this method just creates a random string
  transactions: Transaction[];
  previousBlock = '00000000000000000000000000000000';
  blockNumber = 1;
  minerCounter = 1;
  dataSource = new MatTableDataSource<Transaction>(ELEMENT_DATA);
  transaction: Transaction;

this.emitTransactionService.row$.subscribe(transaction => {
      if (transaction !== false) {
        this.transaction = transaction;
        this.transactions = this.dataSource.data.slice();
        this.blocks[this.minerCounter].dataSource.data = this.transactions;
        // console.log(this.blocks[this.minerCounter].dataSource.data);
        this.sendMessage4();
        }
        this.ref.detectChanges();
      }
    );

  sendMessage4(): void {
    this.messageService.sendMessage4('Message from miner view component to miner card component!');
  }

Miner-card.component:

HTML: 

<div>
      <table mat-table [dataSource]="dataSource" class="example-container mat-elevation-z8">
        <ng-container matColumnDef="sender">
          <th mat-header-cell *matHeaderCellDef> Sender </th>
          <td mat-cell *matCellDef="let element"> {{element.sender}} </td>
        </ng-container>
...
</div>

TS: я использую getMessage4() здесь, чтобы проверить, имеет ли блок какое-либо значение.Но это всегда дает мне null.

      @Input() previousBlock: string;
      transactions: Transaction[] = [];
      @Input() blockHash: string;
      @Input() dataSource: MatTableDataSource<Transaction>;
      @Input() blocks: Block[];

      displayedColumns: string[] = ['sender', 'recipient', 'amount', 'fee'];

      blockNumber: number;

      message2: any;
      subscription2: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription2 = this.messageService.getMessage4().subscribe(message => {
      this.message2 = message;
      this.ref.detectChanges();
      console.log(this.blocks);
    });
  }

После некоторых снимков экрана:

enter image description here

Когда я нажимаю на флажок, я хочу, чтобы строка была удалена из"pool", и я хочу, чтобы строка была добавлена ​​в текущую карту (здесь карта 1).

enter image description here

Почему я не получаю blocks как ввод?

...