如果在 Angular 中使用 ng-multiselect-dropdown 搜索过滤器未找到搜索项，则显示消息

Question

我正在使用 ng-multiselect-dropdown 作为搜索过滤器... 如果搜索到的项目在下拉列表中不可用，我想显示“没有项目匹配”消息...

角度分量

  this.getDynamicFilterList();
  this.settings = {
    singleSelection: false,
    idField: 'tag_id',
    textField: 'tag_name',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 3,
    allowSearchFilter: true,
    clearSearchFilter: true,
  };
}

getDynamicFilterList() {
  this.filterService.getDynamicFilter().subscribe(res => {
    let dummyArr = [];
    for (let key in res.data) {
      dummyArr.push(res.data[key])
    }
    let group = {}
    this.filterDynamicDropdown = dummyArr;
    this.filterDynamicDropdown.forEach(dynamic_filter => {
      group[dynamic_filter.category_id] = new FormControl('');
    })
    this.dynamicFormGroup = new FormGroup(group);
  })
}```

***Angular Template***
```<form [formGroup]="dynamicFormGroup" *ngIf="dynamicFormGroup">
<div class="form-group row" *ngFor="let item of filterDynamicDropdown">
  <ng-multiselect-dropdown class="dynamic-dropdown" placeholder="{{item.category_name}}" [settings]="settings"
    [data]="item.value" [disabled]="false" (onFilterChange)="onFilterChange($event,item.value)"
    (onSelect)="onItemSelect($event)" (onDeSelect)="onDeSelect($event)"
    (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)" formControlName="{{item.category_id}}">
  </ng-multiselect-dropdown>
</div>
</form>```

Answer 1

您可以使用“noFilteredDataAvailablePlaceholderText：'您的消息'”，例如：

  this.settings = {
    singleSelection: false,
    idField: 'tag_id',
    textField: 'tag_name',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 3,
    allowSearchFilter: true,
    clearSearchFilter: true,
noFilteredDataAvailablePlaceholderText:'message you want to show'
  };

Answer 2

更新

在此处跟踪拉取请求

旧

尝试将“noDataAvailablePlaceholderText”属性添加到 this.settings，如下所示：

this.settings = {
   singleSelection: false,
   idField: 'tag_id',
   textField: 'tag_name',
   selectAllText: 'Select All',
   unSelectAllText: 'UnSelect All',
   itemsShowLimit: 3,
   allowSearchFilter: true,
   clearSearchFilter: true,
   noDataAvailablePlaceholderText: 'No items Matches'
};

Answer 3

<ng-select [(ngModel)]="selectedCar" [items]="cars" bindLabel="name" bindValue="id">
    <!-- Custom Header -->
    <ng-template ng-header>
        <div class="custom-header">
            <h3>Available Cars</h3>
        </div>
    </ng-template>

    <!-- Custom Search Input -->
    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
        <div *ngIf="item.name.toLowerCase().includes(search.toLowerCase())">
            {{ item.name }}
        </div>
    </ng-template>

    <!-- Search Input -->
    <ng-template ng-search>
        <input 
            type="text" 
            class="custom-search-input" 
            placeholder="Search for cars..."
            [(ngModel)]="searchTerm" 
            (ngModelChange)="onSearch($event)"
        />
    </ng-template>
</ng-select>