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

Question

我正在尝试根据多选下拉菜单显示/隐藏元素，但我的代码似乎不起作用。 For example, one of the data for nameList is Name, and when Name is selected, I would like to display a div with another drop-down menu.我正在使用 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>

Answer 1

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

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

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

Answer 2

这里基本上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