angular - 如何在Angular中将数据源作为输入传递？

Question

我有一个组件，它显示 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!');
  }

矿工卡组件：

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);
    });
  }

以下是一些截图：

当我单击复选框时，我希望从“池”中删除该行，并将该行添加到当前卡（此处为卡 1）中。

为什么我没有blocks输入？

标签： angulartypescriptinputdatasourcecommunication