在 Angular 5 中同时保存“id”和“name”答案

【问题标题】：Save both 'id' and 'name' in Angular 5在 Angular 5 中同时保存“id”和“name”
【发布时间】：2019-01-14 06:30:03
【问题描述】：

使用 Angular 5、Material 组件和 Firebase 处理项目。是否可以通过一个字段存储两个值。下面是我的代码，我从客户端表中获取数据并在下拉列表中显示名称，但存储“client_id”。我也想用 client_id 存储 client_name。

<mat-form-field>
            <mat-select placeholder=" Select Client" formControlName="client_id" required>
               <mat-option *ngFor="let cli of clientsarray; let i = index " [value]="cli.prodid">{{cli.fname}} {{cli.lname}}</mat-option>
            </mat-select>
 </mat-form-field>

【问题讨论】：

而不是[value]="cli.prodid" 使用整个客户端对象[value]="cli"
@JasonWhite 它工作正常但有点混乱我已经有客户端表，其中已经存储了客户端的全部信息。这是将整个数据存储在另一个表中的好方法吗？

标签： angular angular-material angular5 angular2-template angular2-forms

【解决方案1】：

绑定到一个对象，在本例中为cli。

<mat-option *ngFor="let cli of clientsarray; let i = index " [value]="cli">{{cli.fname}} {{cli.lname}}</mat-option>

【讨论】：

得到响应后，如果值变成了对象，那么如何显示选定的值？
@AniketAvhad - 我不确定你的意思？您可以使用[(ngModel)]（与任何其他控件一样）绑定mat-select 控件以设置选定值（对象）。然后你可以像在组件中使用它一样使用它。
查看实际问题stackblitz.com/edit/… 如果我设置 [value]= "obj" 并将 id 分配给选定的变量，那么它将不会显示第一个选项为选定的。
@AniketAvhad - 您必须将其视为对象。查看更新后的代码：stackblitz.com/edit/angular-pjqqcb-ab83tm