How to prescribe the type of obverwable created from an array?

Question

Angular

public internNavItems: NavBarInterface[] = [
    {name: 'Profile', routerLink: RouterUrl.USER_INFO, icon: 'fa fa-user'},
    {name: 'Tasks', routerLink: RouterUrl.TASKS, icon: 'fa fa-play-circle-o'},
    {name: 'My Settings', routerLink: RouterUrl.MY_SETTINGS, icon: 'fa fa-cogs'},
    // {name: 'Editor', routerLink: RouterUrl.CODE_EDITOR, icon: 'fa fa-edit'},
  ];
  public internNavItems$: Observable<NavBarInterface[]> = from(this.internNavItems);

public internNavItems$ throws an error:
Type 'Observable' is not assignable to type 'Observable'.
Type 'NavBarInterface' is missing the following properties from type 'NavBarInterface[]': length, pop, push, concat, and 26 more.

Answer 1

from(array)will give you a stream of consecutive elements of that array.
Those. this Observable<NavBarInterface>
Type may or may not be explicitly specified, it will be inferred.

Answer 2

I don't know if I need to create a new question, but your answer begs the question:
How do I correctly output this data through async pipe to the template? With the variant below, an error occurs in the console: NgFor only supports binding to Iterables such as Arrays, i.e. internNavItems$ cannot be sorted out, it also does not have the name, routerLink and icon properties from the interface. I tried to display internItem, it is also not displayed.

<div *ngFor="let internItem of internNavItems$ | async" >
    <li class="nav-item" routerLinkActive="active">
      <a [routerLink]='internItem.routerLink' class="nav-link">
        <i [class]="internItem.icon"></i>
        {{ internItem.name }}
      </a>
    </li>
  </div>