如何根据选定的多选显示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(]设置为此selectedname。

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

工作示例