Question

我有一个组件，其中显示10张物料卡。所有这些卡都应该能够包含不同的信息。除了卡中的最后一件事：交易，所有这些工作都有效。我正在尝试使用@Input()装饰器来实现。但是带有@Input()运算符的组件无法获取任何信息。我已经尝试使用服务实现两个组件之间的通信。但是随后所有的卡都在表中进行了相同的交易。因此，我现在尝试使用@Input()来实现这一点，以查看它是否可以那样工作。

以下代码：

Miner-view.component：当我单击一个复选框时，它应该将交易添加到当前卡中。如您所见，这就是订阅被调用的时间。 this.blocks[this.minerCounter]根据minerCounter的值显示1到10之间的块信息。当我记录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作为输入？

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

0 个答案: