Блог

Привет, я написал следующий код для получения замечаний от пользователя. Я могу сохранить данные в локальном хранилище. Теперь я хочу извлечь информацию, хранящуюся в локальном хранилище, и отобразить ее.

#Мой компонент просмотра выглядит следующим образом: #

     <header>Welcome to Products Page!!!</header>
<div class="row">
    <div class="main">
        <div class=" description pointerCursor" (click)="panelExpanded1=!panelExpanded1">Laptop</div>
        <div class="img-container" *ngIf="panelExpanded1">
            <tr>
                <td><img [src]="'assets/img/Img1.png'" alt="Macbook"></td>
                <td>
                    <ul>
                        <b>Unordered information.</b><br>
                        <b>Ordered information.</b><br>
                        <b>Definitions.</b><br>
                        <b>Please give your Remarks:</b>
                        <input type="text" [(ngModel)]="remarks1" name="remarks1">
                        <button type="submit" (click)="submitForm()"> Save </button>
                    </ul>
                </td>
            </tr>
        </div>
    </div>
    <div class="main">
        <div class="description pointerCursor" (click)="panelExpanded2=!panelExpanded2">Mobiles</div>
        <div class="img-container" *ngIf="panelExpanded2">
            <tr>
                <td><img [src]="'assets/img/Img2.png'" alt="OnePlus-Nord"></td>
                <td>
                    <ul>
                        <li>Unordered information.</li>
                        <li>Ordered information.</li>
                        <li>Definitions.</li>
                        <b>Please give your Remarks:</b>
                        <input type="text" [(ngModel)]="remarks2" name="remarks2">
                        <button type="submit" (click)="submitForm()"> Save </button>
                    </ul>
                </td>
            </tr>
        </div>
    </div>
    <div class="main">
        <div class="description pointerCursor" (click)="panelExpanded3=!panelExpanded3">Watch</div>
        <div class="img-container" *ngIf="panelExpanded3">
            <tr>
                <td><img [src]="'assets/img/Img3.png'" alt="Fossil"></td>
                <td>
                    <ul>
                        <li>Unordered information.</li>
                        <li>Ordered information.</li>
                        <li>Definitions.</li>
                        <b>Please give your Remarks:</b>
                        <input type="text" [(ngModel)]="remarks3" name="remarks3">
                        <button type="submit" (click)="submitForm()"> Save </button>
                    </ul>
                </td>
            </tr>
        </div>
    </div>
    <div>
        <button id="backButton" routerLink="/">Back</button>
        <button id="submitButton" routerLink="/">Submit</button>
    </div>
    <footer>End of Products Page!!!</footer>
  

Мой файл .ts выглядит следующим образом. Здесь я добавил localStorage.setItem, теперь я хочу, чтобы данные присутствовали в элементе set . и отображать то же самое.

 import { Component, OnInit } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
@Component({
  selector: 'app-my-product-page',
  templateUrl: './my-product-page.component.html',
  styleUrls: ['./my-product-page.component.css']
})
export class MyProductPageComponent implements OnInit {

  panelExpanded1 = false;
  panelExpanded2 = false;
  panelExpanded3 = false;
  remarks1 = "";
  remarks2 = "";
  remarks3 = "";
  constructor(private router: Router) { }

  ngOnInit(): void {
    if (localStorage.getItem("remarks", this.remarks1) != null) {
      console.log(localStorage.getItem("remarks", this.remarks1))
    }
  }
  submitForm() {
    localStorage.setItem("remarks", this.remarks1);
    localStorage.setItem("remarks", this.remarks2);
    localStorage.setItem("remarks", this.remarks3);
    console.log("test");
  }

}