Вызов массива угловых объектов

Question

Если я получил интерфейс:

export interface Banner {
html: string;
}

  banner = {} as Banner;

и я сохраняю strings в нем следующим образом:

  this.banner.html = xmlDoc.documentElement.innerHTML;

console.log(this.banner.html) дает разные строки.

Затем я хочу вызвать эти разные строки и поместить их в iframe.

Я пытаюсь сделать это с ViewChildren и querying:

  @ViewChildren('html') htmls: QueryList<ElementRef>;

 this.htmls.map((elem, index) => {
       elem.nativeElement.src = 'data:text/html,' + encodeURIComponent(this.navSrv.banner.html);
     });

Тогда я получаю только последнюю строку, не все из них:

console.log("showing only one html string :", elem.nativeElement.src.toString()) 

Как получить все разные строки и поместить их в iframes, а не в последнюю?

Изменить с некоторыми дополнительными объяснениями:

NavService.ts:

export interface Banner {
    html: string;
    }

      banner = {} as Banner;
      this.banner.html = xmlDoc.documentElement.innerHTML;
      console.log(this.banner.html) 

Вывод нормальный, я получаю все строки так:

html: значение, html: значение ..... x n.

Components.ts:

console.log(this.navSrv.banner.html) 

Выход:

last html: значение, вывод только 1.

---

В эксплуатации:

html: значение,

html: значение,

html: значение, N раз ....

В компоненте:

html: значение,

html: значение,

html: значение, <--- только последний. </p>