rxjs take operator is not working correctly

I am going to set first item's id as selected id in the initial loading. For this, I used rxjs take operator, but it is not working. Please help me find why it is not working.

  ngOnInit(): void {
    this.store.dispatch(new LoadVariantsBatch());

    this.filteredVariants$.pipe(take(1)).subscribe((variants) => {
      console.log(variants.length);
      if (variants.length > 0) {
        this.onSelectVariant(variants[0].id);
      }
    });
  }

I used take(1), but when I log items length, it shows 5 which is the length of the whole item list.

the tap operator in rxjs dos'nt take the first element from youre data he just take the first data that the observable emit so in youre case the observable emit items array so that waht you get if you want to only get the first element from your items array you can just use the map operator to do that like this:

ngOnInit(): void {
this.store.dispatch(new LoadVariantsBatch());

this.filteredVariants$.pipe(map(variants => variants[0])).subscribe((variants) => {
  console.log(variants.length);
  if (variants.length > 0) {
    this.onSelectVariant(variants[0].id);
  }
});

}

you can read more about take operator here take() operator, good luck!