如何将本地存储中存在的 json 数据渲染到 html 模板

Question

我在本地存储中存储了一些数据，我想在 html 模板中以插值的方式访问它，但是在模板中调用它时出现错误。

  </code for calling localstorage inside a component.ts file
   ngOninit(){
   this.myResponse = JSON.parse(localStorage.getItem('fav'));
   console.log(this.myResponse)
   return this.myResponse;
   }
   />


  </code inside html template of the component file
   <div class="conatiner">
   <div class="row" *ngFor="let single of myResponse" >
   <p>{{single}}</p>
   </div>
   </div>
   />



     output of html component i am getting
     [Object Object]
     [Object Object]
     [Object Object]
     [Object Object]
     [Object Object]


   console output for component.ts ie console.log(myResponse)
  (6) [{…}, {…}, {…}, {…}, {…}, {…}]0: {ifsc: "ABHY0065001", bank_id: 60, 
   branch: "RTGS-HO", address: "ABHYUDAYA BANK BLDG., B.NO.71, NEHRU 
   NAGAR, KURLA (E), MUMBAI-400024", city: "MUMBAI", …}
    ............}

Answer 1

@vaibhav 你正在那里打印对象，如果你想访问该对象的属性，请替换你的 HTML 代码，如下所示：

<div class="conatiner">
     <div class="row" *ngFor="let single of myResponse" >
        <p>{{single.ifsc}}</p> 
      </div>

或者如果你想显示整个对象然后使用 json 管道

{{single | json}}

如何将本地存储中存在的 json 数据渲染到 html 模板

How to render json data present in local storage to a html template

angular-local-storage

angular