设置下拉列表默认值或使用模型中的值

时间:2018-01-15 14:11:25

标签: angular kendo-ui-angular2

我有一个使用外部表单进行编辑/添加的网格。我用作起点this的例子。表单有一个下拉列表。 [data]来自具有textvalue的对象列表。

我尝试过但都未能做到这两件事:

  • 设置下拉列表的默认值。我设法做的就是在下拉列表中插入一个重复的行,这确实是选中但它也出现了两次。这样做时,我查看了this示例。第二个示例包含对象列表。
  • 在网格中添加新行时,请在模型上设置默认值(对于相同的下拉列表)。结果是完全忽略了为下拉列表设置的值。

有人可以给我一个例子吗?感谢。

我尝试的第一件事的代码:

public arrayOfObjects:Array<SomeClass> = [
    SomeClass.staticList.object1,
    SomeClass.staticList.object2,
    SomeClass.staticList.object3,
    SomeClass.staticList.object4
];

defaultObject:SomeClass = SomeClass.staticList.object2 //I want the second as default.

模板中的下拉列表使用以下内容:

    <kendo-dropdownlist formControlName='theObject'
        [data]="arrayOfObjects" 
        [textField]="'text'"
        [valueField]="'value'"
        [valuePrimitive]="false"
        [defaultItem]='defaultObject'
        [(ngModel)]="theObject" >

下拉内容:

  • Object2的
  • object1
  • object2(是两次)
  • object3
  • object4

我尝试的第二件事的代码:

public addHandler() {
    var newRow = new RowModel();
    newReport.theObject = SomeClass.staticList.object2;
    this.editDataItem = newRow;

    this.isNew = true;
}

在这种情况下没有任何事情发生。下拉列表仍然是空的。

解决方案

问题是我没有为ngModel提供单独的变量。我想由于某种原因,如果我为ngModel指定FormControl的名称,它将神奇地工作。它没有。所以我只创建了一个单独的变量来保存当前选定的值并且它可以工作。感谢。

1 个答案:

答案 0 :(得分:2)

如果没有从列表中选择任何项目,DropDown的defaultItem设置用于添加填充,例如“选择项目...”。

要完成你想要做的事,试试这个:

<kendo-dropdownlist
    [data]="listItems"
    textField="text"
    valueField="value"
    [(ngModel)]="selectedItem"
>

public listItems = [
    { text: "Option1", value: 1 },
    { text: "Option2", value: 2 },
    { text: "Option3", value: 3 }
];

public selectedItem = this.listItems[1];