如何绑定到复杂的对象

Question

在Angular 6中，当select选项的值是复杂对象时，如何绑定到select？

这就是我的意思……

在我们的应用程序中，我们曾经有一个如下所示的选择控件：

<mat-select [(value)]="endpoint.group" (selectionChange)="groupSelection_changed()" class="groupSelect" placeholder="Please select a group”>
<mat-option *ngFor="let g of ddGroups" value="{{ g.groupPublicKey }}">{{ g.groupName }}</mat-option>
</mat-select>

然后我们将其更改为如下形式：

<mat-select #groupSelector [(value)]="endpoint.group" class="groupSelect" placeholder="Please select a group">
  <mat-option *ngFor="let g of ddGroups" [value]="{ key: g.groupPublicKey, value: g.groupName }">{{ g.groupName }}</mat-option>
</mat-select>

重要的更改是mat选项的[value]。它从{{g.groupPublicKey}}更改为{键：g.groupPublicKey，值：g.groupName}

当它只是g.groupPublicKey时，我可以轻松地将其绑定到mat-select [（value）]属性中的endpoint.group，因为endpoint.group和g.groupPublicKey都只是字符串。但是现在endpoint.group和{键：g.groupPublicKey，值：g.groupName}是复杂的对象（endpoint.group的形状也为{键：字符串，值：字符串}）。但是，在mat-select的[[value]]属性中使用endpoint.group将不再起作用。选择中未选择任何内容。

所以我的问题是：一个人如何绑定到其值为复杂对象的选择？