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

Posted 2023-03-13

【中文标题】在 Angular 5 中同时保存“id”和“name”

【英文标题】：Save both 'id' and 'name' in Angular 5

【发布时间】：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 它工作正常但有点混乱我已经有客户端表，其中已经存储了客户端的全部信息。这是将整个数据存储在另一个表中的好方法吗？

【参考方案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