如何将表格行的数据从一个组件传递到另一个组件

Question

我在我的一个组件上使用了 mat-table(Angular Materials)，在单击特定行后，TR 中的数据应该显示到另一个组件。 全部信息都在“行”参数中

以及如何在我的新组件页面上打印它。

我尝试了很多方法来做到这一点，但无法在另一个组件中打印。

我的第一个组件 HTML

<section class="example-container mat-elevation-z8" tabindex="0" >
        <table mat-table [dataSource]="tiffinMenu1">

          <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef> ITEM </th>
            <td mat-cell matRipple *matCellDef="let tiffinOne" ngDefaultControl > {{tiffinOne.item}} </td> //THIS IS THE DATA TO BE PRINTED ON ANOTHER COMPONENT AFTER CLICK ///
          </ng-container>

          <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef> PRICE </th>
            <td mat-cell *matCellDef="let tiffinOne"> {{tiffinOne.price}} </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        </table>
      </section> 

这是我的第二个组件 HTML

<div class="split right">
    <div class="centered">
        <p>Token Number: 02</p>
    </div>

    <p>Working:</p>

// here want to display {{tiffinOne.item}} & {{tiffinOne.price}} which is from another component

    <button>Print</button>
    <button>Cancel</button>
</div>

Answer 1

在 Angular 中，有多种方法可以在组件之间共享数据。 一种方法是使用服务来存储数据并将服务注入到两个组件中。

以下是如何执行此操作的示例：

创建一个服务来存储数据：

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  constructor() { }

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

将服务注入两个组件并在第一个组件中设置数据：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-first-component',
  template: `
    <section class="example-container mat-elevation-z8" tabindex="0" >
      <table mat-table [dataSource]="tiffinMenu1">

        <ng-container matColumnDef="item">
          <th mat-header-cell *matHeaderCellDef> ITEM </th>
          <td mat-cell matRipple *matCellDef="let tiffinOne" ngDefaultControl > {{tiffinOne.item}} </td>
        </ng-container>

        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef> PRICE </th>
          <td mat-cell *matCellDef="let tiffinOne"> {{tiffinOne.price}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="setData(row)"></tr>

      </table>
    </section> 
  `,
  styleUrls: ['./first-component.component.css']
})
export class FirstComponent implements OnInit {
  displayedColumns: string[] = ['item', 'price'];
  tiffinMenu1 = [    {item: 'Tiffin One', price: '10'},    {item: 'Tiffin Two', price: '20'},    {item: 'Tiffin Three', price: '30'}  ];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
  }

  setData(data: any) {
    this.dataService.setData(data);
  }
}

在第二个组件中，从服务中获取数据并显示：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-second-component',
  template: `
    <div class="split right">
      <div class="centered">
          <p>Token Number: 02</p>
      </div>

      <p>Working:</p>

      <p>{{ data?.item }}</p>

我希望这有帮助！

Answer 2

我认为可以这样实现：

1. 将点击事件处理程序添加到<tr mat-row...并将当前行 (let row) 传递给此处理程序
2. 在此处理程序中，将单击的行存储在组件的公共字段中，例如this.selectedRow = row
3. 将您的第二个组件绑定到 selectedRow