如何根据选定的多选显示div

时间:2018-11-21 05:13:37

标签: angular typescript kendo-ui

我试图基于多选下拉列表显示/隐藏元素,但是我的代码似乎不起作用。例如,nameList的数据之一是Name,当选择Name时,我想显示一个带有另一个下拉菜单的div。我正在使用Angular和Typescript。以下是我的代码供您参考:

<kendo-multiselect [data]="nameList" [(ngModel)]="selectedname "></kendo-multiselect>


<div *ngIf="selectedname === 'Name'">
<div class="col-4">
   You selected {{selectedname}}
</div>
<div class="col-2">Name:</div>
<div class="col-6">
  <kendo-dropdownlist style="width: 100%" [data]="anotherList" [valuePrimitive]="true"></kendo-dropdownlist>
</div>
</div>

2 个答案:

答案 0 :(得分:0)

基本上,这里selectedname返回一个数组,因此您需要检查数组中是否存在某个项目。因此,您可以使用以下代码进行检查-

<kendo-multiselect [data]="nameList" [(ngModel)]="selectedname "></kendo-multiselect>


<div *ngIf="isShown('Name')">
<div class="col-4">
   You selected {{selectedname}}
</div>
<div class="col-2">Name:</div>
<div class="col-6">
  <kendo-dropdownlist style="width: 100%" [data]="anotherList" [valuePrimitive]="true"></kendo-dropdownlist>
</div>
</div>


isShown(flag) {
      console.log(this.selectedname.indexOf(flag));
      if (this.selectedname.indexOf(flag) !== -1) {
        return true;
      } else {
        return false;
      }
    }

Working example

答案 1 :(得分:0)

在“ kendo-mutliselecet”的更改事件上,将selectedname项目推到“ anotherList”,然后将kendo-dropdownlist [(ngModel)]设置为此选定的名称。

<div *ngIf="selectedname.indexOf('Name')>=0">

我认为这将是解决方案。未经测试。