Как прописать тип обвервабл, созданного из массива?

Question

[alexbog90]

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$ выдает ошибку:
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) даст вам поток из последовательных элементов этого массива.
Т.е. это Observable<NavBarInterface>

Тип можно явно и не указывать, он будет выведен.

Answer 2

[alexbog90]

Не знаю, нужно ли создать новый вопрос, но из вашего ответа вытекает вопрос:
Как мне правильно вывести эти данные через асинк пайп в шаблон? При варианте ниже в консоли ошибка: NgFor only supports binding to Iterables such as Arrays, т.е internNavItems$ перебирать не получается, также на нем нет свойств name, routerLink и icon из интерфейса. Пробовал выводить internItem, также не отображается.

<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>

Comments

[Антон Швец]

вы путаете последовательный поток с элементами и поток с массивом.
from из переданного ему массива берет элементы по одному и эмитит друг за другом.
Подписавшись на него в шаблоне через AsyncPipe у вас быстро прилетают все элементы и запоминается последний, а это у вас объект. Он разумеется неитерируемый, поэтому "only supports binding to Iterables"

А надо в поток засунуть массив целиком как одно единственное значение.
Т.е. сделать
of(this.internNavItems)

Предыдущее несоответствие типов уже должно было навести на мысль, но вместо того чтобы искать где у вас ошибка, как подсказывал тайпскрипт, вы решили исправить тип :))
Яркий пример как тайпскрипт помогает.