ngx-select-dropdown 使页面空白答案

【问题标题】：ngx-select-dropdown makes page blankngx-select-dropdown 使页面空白
【发布时间】：2022-01-04 21:38:29
【问题描述】：

我正在尝试使用 nix-select-dropdown 为商店 ID 制作可搜索的下拉菜单。我最初只用一个输入框创建了这个页面，一切都很好。一旦我添加了 ngx-select-dropdown 事件，这个标签就不会显示，下拉菜单也不会显示。

在添加下拉列表之前：

添加下拉菜单后：

store-setting-view-page.component.html

<H1 align="center">Store Settings Viewer</H1>
<div><label>Store ID: </label><input type="text" aria-label="Store ID"></div>



<label>Store ID: </label>
<div class="col s12 l6">
<ngx-select-dropdown tabindex="0" (change)="changeValue($event)" [multiple]="true" [(ngModel)]="storeSelection"
                   [config]="storeIDDropdownConfig" [options]="stores"></ngx-select-dropdown>
</div>

<div>
<label>MIR Program: </label>
<select [(ngModel)]="mirProgram">
<option value="missed quote">Missed quote</option>
<option value="minutes over">Minutes Over</option>
</select>
</div>
<div>
....

store-setting-view-page-component.ts

import { Component, OnInit } from '@angular/core';
import {SelectDropDownModule} from "ngx-select-dropdown";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
selector: 'app-store-settings-view-page',
templateUrl: './store-settings-view-page.component.html',
styleUrls: ['./store-settings-view-page.component.css']
})

export class StoreSettingsViewPageComponent implements OnInit {
stores:any =[
{
  storeID:"1",
  mirOptIn:"true",
  smsOptIn:"true",
  pushOptIn:"true",
  loyaltyOptIn:"true",
  mirProgram:"minutes over",
  missQuoteTimePromo:"Free Large Pizza",
  minutesOverPromo:"Free Large Pizza",
  minutesOver:"10"
}, {
  storeID:"2",
  mirOptIn:"true",
  smsOptIn:"true",
  pushOptIn:"true",
  loyaltyOptIn:"true",
  mirProgram:"minutes over",
  missQuoteTimePromo:"Free Large Pizza",
  minutesOverPromo:"Free Large Pizza",
  minutesOver:"12"
}
];
storeSelection: any = [];
storeIDDropdownConfig = {search: true, displayKey: 'storeID', limitTo: 3};
mirProgram: any = "minutes over";
data: string[]=["1","2","3"];
constructor() {

}

ngOnInit(): void {
}

search() {

}

changeValue($event: any) {

}
}

【问题讨论】：

标签： angular drop-down-menu ngx-select-dropdown

【解决方案1】：

模板中缺少 "：

<ngx-select-dropdown 
    tabindex="0" 
    (change)="changeValue($event)" 
    [multiple]="true // <-- MISSING " at the end
    [(ngModel)]="storeSelection" 
    [config]="storeIDDropdownConfig" 
    [options]="stores">
</ngx-select-dropdown>

【讨论】：

复制粘贴到这里时好像出错了。我也尝试使用 ng-select 并得到同样的问题。