如何基于选定的多选择显示div

Question

我试图基于多选择下拉列表显示/隐藏元素，但我的代码似乎不起作用。例如，nameList的数据之一是名称，当选择名称时，我想用另一个下拉菜单显示一个div。我用的是棱镜和打字稿。以下是我的代码，供您参考：

<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>

Answer 1

基本上，在这里，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;
      }
    }

工作实例

Answer 2

在更改“”事件时，将selectedname项推送到"anotherList“，然后将kendo下拉列表(ngModel)设置为该选择名称。

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

我认为这是解决问题的办法。还没测试过。