Question

我有2个称为 customers 和 workers 的api，我将在每个customers中显示所有Assigned workers和customer table组件是这样的：

现在，当我单击特定客户对象的edit按钮时，我在名为{{1的“对话框组件中显示该单击的对象（例如Jhon Doe）properties }}：

与此同时，我想在表组件中像这样显示分配的工作人员（斯蒂芬·弗林，米歇尔·天鹅...）属性（名称，电子邮件...）：

Answer 1

一旦检索了所有工人，就必须遍历他们：

JestClient

并将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

Answer 2

这里是您的问题的解决方案。

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>

Forked stackblitz solution

希望获得帮助！

Answer 3

自Angular 6开始，Angular提供了向Material表（称为simple table）而不是数据源类提供对象数组的可能性。

在您的edit.component.html中，向datasource的{{1}}指令提供您的工作人员数组：

mat-table

您也不需要创建服务来与您的<table mat-table [dataSource]="workers">通信，因为edit.component调用中的config对象具有属性dialog.open()，该属性明确地用于此任务。请参阅Material dialog documentation。

更新

根据您的评论（尚不清楚阅读您的第一篇文章），您只想显示所选客户条目的工作人员。

代替使用表中的worker ID，然后然后使用一种方法获取完整的客户对象，请使用workers数组。将customer对象（而不是纯id）传递到customers.component.ts中的data方法。现在，通过使用用于向“材料”对话框提供数据的文档，您可以使用工人阵列并将其显示在表格中。

要使用辅助对象而不是普通ID，请在onEdit方法中映射this.workers数组：

ngOnInit

Answer 4

这是更新的堆叠闪电战

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

您可以在edit.component.ts中找到与您相关的Worker LIst，如下所示：

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>

在表格组件中显示所选对象的属性

4 个答案: