Angular 10 rxjs вывод одного случайно элемента из массива

пытаюсь вывести из async pipe случайный элемент, но что-то ничего не отображается.

C# Api

    [HttpGet]
    [Route("test")]
    public IEnumerable<string> Test()
    {
        return new List<string>() { "First", "Second", "Third" };
    }

Angular service

public Items$ = this.http.get<string[]>('https://localhost:44338/api/home/test')
.pipe(
  tap(data => console.log(JSON.stringify(data)),
    catchError(this.handleError))
);

Angular component

public randomItem$ : Observable<string> = this.homeService.Items$[0];
public Items$: Observable<string[]> =  this.homeService.Items$;

Html:

<div *ngFor="let item of Items$ | async">
    {{item}}
</div>

<h1>{{randomItem$ | async}}</h1>  

*ngFor как и положенное выводит элементы но на месте {{randomItem$ | async}} пусто. В чем может быть проблема?