Question

我正在使用multi-select package作为我的角项目。它允许我绑定到我的反应形式模型，该模型工作正常。

在我的组件的init上，我将模型中的初始值存储在变量中。我允许用户启用＆＃34;编辑模式＆＃34;在我的页面上，它们为他们提供了多选下拉菜单。

如果他们想要退出他们所做的任何更改（选择/删除），我需要重新设置初始值。

this.ruleAttributeForm.controls['AttributeValue'].setValue(this.initialValueInput, {emitEvent: true})

我尝试做类似这样的事情，它会更新模型和输入框本身，但是，当我打开下拉列表时，先前选择的值仍然会被选中，尽管它们不会出现在输入。

<ng-select formControlName="AttributeValue" [items]="valueOptions" [multiple]="true" bindLabel="Value" placeholder="Select one or more values" class="test"></ng-select>

此输入选择的值来自formControlName，要选择的项目来自[items]。 .setValue似乎适用于模型/输入，但不能重置哪些项目可供选择（我在重置控制值之前选择的项目标记为使用中）。

我是否应该采用另一种方式处理更新我的表单值或者这是一个插件问题？

Answer 1

根据docs，传递给valueOptions属性的列表items的每个元素都应符合下面的NgOption类型，

export interface NgOption {
    [name: string]: any;
    selected?: boolean;
    disabled?: boolean;
    label?: string;
    value?: string;
}

它有一个可选的boolean selected属性。因此，尝试将selected属性及其相应的boolean值作为默认值添加到valueOptions数组的每个元素，然后在重置formControl的值时重置此属性

Angular2 - 更新多选的数据模型的表单值

1 个答案: