querySelectorAll не отображает все элементы в массиве, Angular материал

Question

Мой массив - viewAllNotes: NodeListOf<Element> правильно показывает несколько элементов (заметок) в массиве, но я не могу вернуть все элементы в массиве, я вижу только заметку в позиции [1]. Должны отображаться две заметки из массива [0] и [1], но длина массива также будет варьироваться на разных этапах. (FYI) Предполагается, что эти примечания будут отображаться в Angular 9 Материале (mat-vertical-stepper) в шаге. HTML с class = 'all_note' вводится отдельно, у меня нет доступа для его изменения. (Невозможно использовать Jquery).

Я что-то упустил?

component.ts ...

     fims: Array<Element>;
      fimSteps: Array<FimStep>;
      fimStack: Array<FimStep>;
      fimLinks: Array<any>;



   export class FimStep {
              id: string;
              number: string;
              type: 'question' | 'action';
              question: string;
              options: Array<{ target: string, text: string }>;
              linksIds: Array<string>;
              note?: string;
            }

    getFIMSteps() {
        this.fims.forEach(stepElement => {

         const fimStep: FimStep = {
                id: stepElement.id,
                number: number,
                type: 'question',
                question: '',
                options: [],
                linksIds: [],
                note: ''
              };
        let viewAllNotes = stepElement.querySelectorAll('.all_note');

         for (let i = 0; i < viewAllNotes.length; i++) {  
         fimStep.note = viewAllNotes[i] ? viewAllNotes[i].innerHTML : '';
             }

           }
          }

component. html ...

<mat-vertical-stepper #stepper>
<mat-step *ngFor="let step of fimStack">
    <ng-container >
              <div [innerHTML]="step.note"> </div> 
    </ng-container>  
</mat-step>
</mat-vertical-stepper>