Для отображения выбранных свойств объекта в компоненте таблицы

Question

У меня есть 2 API, которые называются клиенты и рабочие , я отображаю все customers и Assigned workers каждого customer в компоненте table следующим образом:

Теперь, когда я нажимаю кнопку edit определенного клиента объекта, я показываю этот объект, на который нажал (например, Джон Доу)) properties в диалоговом компоненте, называемом edit, например:

Наряду с этим я хочу отображать назначенных работников (Стивен Флюин, МичелSwan ....) свойства (имя, адрес электронной почты ....) в компоненте таблицы , например:

DEMO Stackblitz

Answer 1

Это обновленный стек

https://stackblitz.com/edit/loading-object-properties-into-table-gekw14?file=src/app/edit/edit.component.html

. Вы можете найти соответствующий список рабочих в edit.component.ts, например:

console.log("this.selectedCustomer", this.selectedCustomer)
let workerlist = this.selectedCustomer.workerIds

this.workers = await this.myService.getWorkers('');
console.log("this.workers", this.workers)
for (let i of this.workers) {
  for (let j of this.selectedCustomer.workerIds) {
    if (j==i.id) {
      this.relatedWorkerLIst.push(i.name);
    }
  }
}

и в edit.component.html:

<form [formGroup]="editForm">
<h3>{{selectedCustomer?.name}}</h3>
<h3>{{selectedCustomer?.email}}</h3>
<h5 *ngFor="let i of relatedWorkerLIst">{{i}}</h5>

Answer 2

После того, как вы извлекли всех своих работников, вы должны выполнить итерации по ним:

public async ngOnInit() {
   this.editForm = this.fb.group({
   });
   this.selectedCustomer = this.dataService.getSelectedCustomer();
   this.workers = await this.myService.getWorkers('');
   this.customerWorkers = this.getWorkersById(this.selectedCustomer.workerIds)
}



public getWorkersById(workIds: string[]): IWorker[] {
     let workers: IWorker[] = [];
     if (this.workers && this.workers.length > 0) {
     for (const w of this.workers) {
         for(let id of workIds) {
            if(w.id == id) {
               workers.push(w);
            }
         }
      }
   }
   return workers;
}

И установить customerWorkers в качестве источника данных вашей таблицы:

<table mat-table [dataSource]="customerWorkers" matSort class="mat-elevation-z8">

Answer 3

Вот решение вашей проблемы.

TS

public async ngOnInit() {
    this.editForm = this.fb.group({
    });
     this.selectedCustomer = this.dataService.getSelectedCustomer();
     console.log(this.selectedCustomer);
     this.workers = await this.myService.getWorkers('');

     this.selectedCustomer.workerIds.forEach( id => {
       console.log(id);
       this.filteredWorker.push(this.getWorkersById(id));
     })

     this.filteredWorker = [...this.filteredWorker];
  }

HTML

<table mat-table [dataSource]="filteredWorker" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
    <td mat-cell *matCellDef="let element">{{element.email}} </td>
  </ng-container>
    <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone</th>
    <td mat-cell *matCellDef="let element">{{element.phone}} </td>
  </ng-container>

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

</table>

Расклеенный стек-раствор

Надеюсь, эта помощь!

Answer 4

Начиная с Angular 6, Angular предоставляет возможность предоставлять массив объектов для таблицы материалов (называемой простая таблица ) вместо класса источника данных.

В вашем edit.component.html,предоставьте свой массив рабочих директиве datasource mat-table:

<table mat-table [dataSource]="workers">

Вам также не нужно создавать службу для связи с вашим edit.component, потому что объект конфигурации в dialog.open() call имеет свойство data, которое явно для этой задачи.Пожалуйста, обратитесь к документации Диалог материалов .

---

Обновление

На основании вашего комментария (что было непонятно при чтении вашего первоначального сообщения), вы хотите показать только работников выбранной записи клиента.

Вместо использования рабочих идентификаторов в вашей таблице и , а затем получения полного объекта клиента с использованием метода, используйте рабочий массив,Передайте объект customer (вместо простого идентификатора) методу onEdit в вашем customer.component.ts.Используя документацию для предоставления данных в диалоговое окно «Материал», теперь вы можете использовать массив рабочих и отображать их в таблице.

Чтобы использовать рабочие объекты вместо простых идентификаторов, сопоставьте массив this.workers вВаш ngOnInit метод:

 this.customers.map((customer: ICustomer) => {
     const workers: IWorker[] = [];
     for(let i = 0; i < customer.workerIds.length; i++) {
         workers.push(getWorkerById(customer.workerIds[i]));
     }
     // You probably need a view model to assign a worker to the id field, or use `any`
     <any>customer.workerIds = workers;
 });