Отображение данных строки из Angular Таблица материалов в другой компонент - PullRequest
Новая
       36

Отображение данных строки из Angular Таблица материалов в другой компонент

0 голосов
/ 29 января 2020

У меня есть два компонента. Первый компонент содержит Angular Таблица материалов, в то время как второй будет отображать детали строки, щелкнувшей в таблице.

Первый компонент: 

    const ELEMENT_DATA: GoodsList[] = [
    {initial: 'J', eta: '20-01-2020', src: 'IN'},
    {initial: 'N', eta: '20-01-2020', src: 'ON''}
]
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="ordered">
        <th mat-header-cell *matHeaderCellDef> Initial </th>
        <td mat-cell *matCellDef="let element"> {{element.initial}} </td>
    </ng-container>

    <ng-container matColumnDef="eta">
        <th mat-header-cell *matHeaderCellDef> ETA </th>
        <td mat-cell *matCellDef="let element"> {{element.eta}} </td>
    </ng-container>

    <ng-container matColumnDef="srt">
        <th mat-header-cell *matHeaderCellDef> SRC </th>
        <td mat-cell *matCellDef="let element"> {{element.src}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></tr>
</table>

Теперь функция getRecord () работает как задумано. 

    getRecord(row: GoodsList){
    console.log(row);
    }

Данные записываются в переменную строки, но теперь, как я могу передать их в другой компонент, основываясь на том, что я нажал?

1 Ответ

2 голосов
/ 29 января 2020

Вот пример использования службы (пример относится к управлению пользователями):

  • В вашем UserService объявите пользователя свойства с типом Subject. 
user: Subject<User> = new Subject();
  • Выставить его снаружи как наблюдаемый: 
user$: Observable<User>
...
this.user$ = this.user.asObservable();
  • Функция входа обновит субъект частного пользователя. 
login(userName: string, password: string) {
  //...
  this.user.next(new User("First name", "Last name"));
}
  • В вашем UserComponent подпишите пользователя UserServive $, наблюдаемого для обновления представления. 
this.userService.user$.subscribe((userData) => {this.user = userData;});
  • На ваш взгляд, просто используйте интерполяцию строк: 
{{user?.firstName}} {{user?.lastName}}

Вот рабочий поршень: http://plnkr.co/edit/qUR0spZL9hgZkBe8PHw4?p=preview

...