Проблема с отображением изображений из локального хранилища

Question

Я новичок в angular фреймворке и не привык к веб-разработке. Я не смог отобразить изображения, хранящиеся в локальном хранилище.

<tr *ngFor = "let item of unused; let i = index ; ">
     <div   style="padding-left:25%;padding-top:0%;"  class="row">
          <img  src="" id="imageID{{i}}" style ="width: 100%;height: 100%;padding-right: 50px;padding-bottom: 15px;" >
     </div>
</tr>

Я объявил переменную массива глобально и также использовал в ngOnit вот так

unused=[1,2,3,4,5]

for (let i=0; i<5;i++)
    { 
      var n = i.toString();

      var dataImage = localStorage.getItem(("image"+ n));
      var bannerImg = document.getElementById(("imageID"+n)) as HTMLImageElement;
      bannerImg.src = dataImage;
    }

Answer 1

dataImages: any[]= [];

ngOnInit(){
for (let i=0; i<5;i++)
    { 
      var dataImage = localStorage.getItem(("image"+ i));
      dataImages.push(dataImage);
    }
}

<tr *ngFor = "let item of dataImages">
     <div   style="padding-left:25%;padding-top:0%;"  class="row">
          <img  [src]="item"  style ="width: 100%;height: 100%;padding-right: 50px;padding-bottom: 15px;" >
     </div>
</tr>