How to set default value in RxJs with BehaviorSubject-CodePudding

I wonder how to set default value in RxJs with BehaviorSubject, so I would like to have default value 15 images. From my interface I would like take only 15 urls, and how to subscibe them. I would be very grateful if someone could explain to me how to make it work.

app component

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { DogInfo } from './interface/dogInfo';
import { HttpService } from './service/http.service';

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

  constructor(private httpService: HttpService) { }
  
  items$: any = new BehaviorSubject<DogInfo[]>();

  ngOnInit() {
    this.items$.subscribe((item: any) => this.httpService.fetchDogsFromApi());
  }
}

interface

export interface DogInfo{
    id: number;
    name?: string;
    breadGroup?: string;
    lifeSpan?: string;
    breadFor?: string;
    temperament?: string[];
    url: string;
}

CodePudding user response：

You can use like below code:

items$: any = new BehaviorSubject<DogInfo[]>([{id: 0, url: 'your-url'}]);

CodePudding user response：

Probably there is a better way, you could use take and grab the first 15 items from dogs, and set that value to your custom Subject as:

items$ = new BehaviorSubject<DogInfo[]>([]); // initialize as an empty array
private dogsArray: DogInfo[] = [];

constructor(private http: HttpService) {}

ngOnInit(): void {
  this.http.fetchDogsFromApi().pipe(
   take(15), 
   tap((dog) => this.dogsArray.push(dog))
  ).subscribe({
    // after the 15 dogs are taken, it will emit that data to the template
    complete: () => this.items$.next(this.dogsArray)
  });
}

HTML

<ng-container *ngIf="(items$ | async) as dogs">
 <div *ngFor="let dog of dogs; let i = index">
   <p>Dog #: {{ i }}</p>
   <p>Name: {{ dog.name }}</p>
   <p>...</p>
 </div>
</ng-container>