使用先前选择的选项重新填充选择答案

【问题标题】：Repopulating a select with previously selected options使用先前选择的选项重新填充选择
【发布时间】：2018-09-26 08:38:57
【问题描述】：

当用户创建帖子时，他们可以从可以发送帖子的潜在用户列表中进行选择。然后允许用户编辑帖子，但是，我现在处理两个对象：一个包含所有潜在用户的列表，另一个包含在创建帖子时选择的用户列表。

我的问题：在编辑帖子时，我怎样才能让所有潜在用户都是一个选项，但在创建帖子时选择的用户已经被选中？

<ion-select [(ngModel)]="post.To" [ngModelOptions]="{standalone: true}" multiple="true" cancelText="Cancel" okText="OK">
    <ion-option *ngFor="let member of members.PotentialPeople" [value]="member">
        {{ member.Name }}
    </ion-option>
</ion-select>

【问题讨论】：

在创建时选择的用户是否保存为帖子模型的一部分/在编辑开始时作为该信息的一部分可用？
@EricaGrant 是的。在页面构建时，整个帖子对象都可用。
如果您将 ngModel 设置为等于 post.To.members（或者它是嵌套的），它不会填充选择部分吗？就像您在想要保存的表单中有下拉菜单并将它们绑定到您的模型一样 [(ngModel)]="post.To.member" 如果您返回编辑它，它将被填充。跨度>
您的和在创建和编辑之间的定义是否不同？您是使用不同的组件进行编辑和创建还是使用相同的组件？
选项是来自members.PotentialMembers的所有潜在选项。所以在创建时，post.To 是空的，然后填充用户选择的选定选项。然后稍后当用户想要编辑帖子时，post.To 对象仍然绑定到select，但选项仍然是所有潜在用户的列表。我需要该列表是所有潜在用户的列表，其中当前在 post.To 中的用户已经被选中。

标签： angular typescript select ionic-framework

【解决方案1】：

所以在前端，使用[compareWith] 允许我将这两个对象发送到控制器上的一个函数，然后该函数将比较这两个对象。

在模板上：

<ion-select [(ngModel)]="post.To" [ngModelOptions]="{standalone: true}" [compareWith]="compareObjects" cancelText="Cancel" okText="OK">
  <ion-option *ngFor="let member of members.PotentialPeople" [value]="member">
    {{ member.Name }}
  </ion-option>
</ion-select>

在控制器上：

compareObjects(currentSelection, potentialSelection): boolean {
    return currentSelection && potentialSelection ? currentSelection.Id === potentialSelection.Id : currentSelection === potentialSelection;
}

【讨论】：

【解决方案2】：

我认为你正在寻找的是类似的东西

[selected]="member.Name == potentialMember.Name"

<ion-option *ngFor="let member of members.PotentialPeople" [value]="member" [selected]="member.name == potentialMember.Name">

在下面的帖子中查看 Perrier 的回答。

How to set default selected value of ion-option?

当用户创建所选用户的帖子时（与潜在用户的整个列表不同），听起来您正在保存一个单独的列表。

因此，如果您添加 [selected]="(已保存到帖子的用户) == (所有可能的用户)"，则应预先选择已与编辑帖子相关联的用户。

如果这不起作用，请告诉我。谢谢。

【讨论】：