根据对象的ID显示对象属性

Question

我有一个名为list的组件，它将在其中显示我所有的customers list，如下图所示：

并选择特定客户，我将发出该客户 id ，并在另一个名为display的组件中显示该 id ：

我不显示customer id，而是显示这样的 id 属性（例如，姓名，电子邮件）：

DEMO

Answer 1

而不是仅传递ID，而是在单击事件中传递完整的对象，如下所示-

(click)="selected($event, customer)"

并显示您想要显示的内容-

{{CustId?.id}} {{CustId?.name}}

Working Example

Answer 2

您似乎正在使用Angular Material，以下示例显示了如何在下拉列表中显示所需的属性，以及下拉列表中所选值的属性。 它在mat-select上使用值绑定将所选客户绑定到selectedCustomer：

const customers = [
  { id: 2, email: 'test1@cust.com', name: 'Jack' },
  { id: 2, email: 'test2@cust.com', name: 'John' }
];

<mat-form-field>
   <mat-select placeholder="Customer" [(value)]="selectedCustomer">
      <mat-option *ngFor="let customer of customers" [value]="customer.id">
        {{ customer.id }}
      </mat-option>
   </mat-select>
</mat-form-field>

<p>{{ selectedCustomer.name }} {{ selectedCustomer.email }}</p>