ng-select with async data from a BehaviourSubject stays empty

136 Views Asked by At

I'm trying to use <ng-select> to implement a product filter. The filter values (brands) come from an Observable (HTTP request). I'm using a BehaviourSubject that I've bound to the ng-select. And nothing never appear in the dropdown list, it keeps showing "No item found"...

(I'm using Angular 16.2 and ng-select 11.1)

HTML

<ng-select [items]="brands$ | async" 
                placeholder="Marques"
                [(ngModel)]="selectedBrands" 
                bindLabel="label"
                [multiple]="true"
                class="input-field">

                <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
                    <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> {{item.name}}
                </ng-template>
</ng-select>

TS

@Component({
  selector: 'app-product-grid',
  templateUrl: './product-grid.component.html',
  styleUrls: ['./product-grid.component.css']
})
export class ProductGridComponent implements OnInit {

  brands$: BehaviorSubject<Brand[]> = new BehaviorSubject<Brand[]>([]);
  selectedBrands: Brand[] = []

  constructor(private pss: ProductStoreService){}

  ngOnInit(): void {
    this.pss.brands$.subscribe((brands:Brand[]) => {
      console.log(brands.length + ' items') // this logs "9 items", as expected
      this.brands$.next(brands)
    })
  }

}

The array of brands is very basic and looks like this

[{
  entityID: 1,
  label: "Adidas"
},...]
0

There are 0 best solutions below