Как отобразить div на основе выбранного мультиселектора

Question

Я пытаюсь показать / скрыть элементы, основанные на выпадающем меню множественного выбора, но мой код не работает.Например, одним из данных для 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>

Answer 1

При изменении события «kendo-mutliselecet» нажмите элемент selectedname на «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;
      }
    }

Рабочий пример