选择使用 Angular 2 显示选定值的对象答案

【问题标题】：Select shows object for selected value with Angular 2选择使用 Angular 2 显示选定值的对象
【发布时间】：2018-07-06 20:17:10
【问题描述】：

我有一个可以很好地加载值的选择组件，但无论我把什么作为值，它总是作为对象返回。我已经尝试了以下

<select [(ngModel)]="p.selectedUser">
    <option *ngFor="let u of p.practiceUsers;let i of index;" [value]="i">{{ u.userName }}</option>
</select>

<select [(ngModel)]="p.selectedUser">
    <option *ngFor="let u of p.practiceUsers;let i of index;" [value]="u">{{ u.userName }}</option>
</select>

<select [(ngModel)]="p.selectedUser">
    <option *ngFor="let u of p.practiceUsers;let i of index;" value="{{i}}">{{ u.userName }}</option>
</select>

如果在下面的页面上选择我输入{{ p.selectedUser | json}}，它会显示[object object]

我的应用程序中都有这样的选择，所以我不确定我在这里缺少什么。 p.selectedUser 的值默认来自服务器，只是一个空字符串。

practiceUser 对象是这样的：{ userId: 1, userName: "Joe Smith" }

为了进一步参考这里是截图。

【问题讨论】：

如果你正在做*ngFor="let u of p.practiceUsers 并且practiceUser 对象是{ userId: 1, userName: "Joe Smith" }....你正在做一个*ngFor 在一个对象中？
您是否尝试登录{{ p.selectedUser.value | json }}？

标签： javascript angular angular2-template

【解决方案1】：

第二种方法应该不错。您确定 p 中的数据正确吗？

【讨论】：

如果[value]="u" 和u 是用户对象，它的属性u.userName 是标签是有意义的。
这真的是评论，而不是答案。多一点代表，you will be able to post comments。我将这篇文章标记为删除。
@Jimenemex 只是因为恕我直言，该帖子并没有真正尝试回答这个问题。顺便问一下，第二种方法是哪一种？

【解决方案2】：

好吧，我从来没有让它识别 u 的值，但我确实通过更改它来使用索引作为值：

<select [(ngModel)]="p.selectedUser">
    <option *ngFor="let u of p.practiceUsers;let i = index;" [value]="i">{{ u.userName }}</option>
</select>

我有一个 of 而不是一个 =

【讨论】：