Блог

Я работаю над одним проектом angular, в котором у меня установлен пакет nz-zorro-ant-design для согласованных элементов пользовательского интерфейса.

один сценарий :

Я использую NZ-Select элемент из Package . в качестве требования проекта я отображаю несколько элементов в качестве опции в этом поле выбора следующим образом :

Component.ts :

 let heros = [ 
            { name: "Tony", id: 1, hasMoney: true },
            { name: "Bruce", id: 2, hasMoney: false},
            { name: "Sam", id: 3, hasMoney: false},
            { name: "Oliva", id: 4, hasMoney: true},
 ]
let selectedHero = null;

filterHerosList(query, option) {
      return option.nzLabel.toLowercase().includes(query.toLowerCase()) amp;amp; !nzDisabled
}
 

Component.html :

 <nz-select [(ngModel)]="selectedHero" nzAllowClear nzPlaceHolder="Select hero" [nzFilterOption]="filterHerosList"> 
     <nz-option *ngFor="let hero of heros;" nzLabel="{{hero.name}}" [nzDisabled]="!hasMoney" nzValue="{{hero.id}}">
     </nz-option>
</nz-select>
 

Ожидаемое поведение выпадающего списка:

Выпадающий select список и search поведение выглядят следующим образом. если у героя есть деньги (hasMoney), тогда и только тогда он должен быть выбран.

Что я пробовал :

1. Я использовал [nzFilterOption] обратный вызов nz-select для отфильтровывания списка параметров поиска. Чтобы пользователь не мог искать отключенную опцию из списка.
2. Отключить опции на основе hasMoney значения ключа
3. Они работают правильно

Проблема :

1. Отключенная опция будет по умолчанию выбрана, когда она находится на первой позиции в списке опций.

Кто-нибудь, ребята, знает решение этой проблемы?