angular.js - angular2 basic questions, please answer

Question

This is my project. The logic is as follows. The product list is displayed on the right. Press Add to determine whether it has been added to the shopping cart. If so, add the quantity. If not, create a record.
How to match the product list with the user's shopping cart when the page refreshes?

<ion-header>
  <ion-navbar>
    <ion-title>产品列表</ion-title>
    <button ion-button menuToggle end>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

<ion-content>
  <p class="left-list">
    <ion-list >
      <button ion-item *ngFor="let category of categories" (click)="getItems(category)" [class.active]="category==selectCategory">
        {{ category.name }}
      </button> 
    </ion-list>
  </p>
  <p class="right-content">
    <ion-list>
      <ion-item *ngFor="let item of items">
        <ion-thumbnail item-left *ngIf="item.image">
          <img src="{{item.image}}">
        </ion-thumbnail>
        <h2>{{item.name}}</h2>
        <p>{{item.text}}</p>
        <p class="input-group">
          <button ion-button round>-</button>
          <input type="number" [(ngModel)]="item.cart.number || 0" >
          <button ion-button  round (click)="itemInc(item)">+</button>
        </p>
      </ion-item>
    </ion-list>
  </p>
</ion-content>

My current logic is to associate the user's record of the product in the shopping cart. If there is a record item.cart.number, it will be displayed. If there is no record, 0 will be displayed. The result is a lot of errors. . . .

Answer 1

This should be a matter of making a convenient data structure.

The structure of the list is given to you by the backend and does not require conversion. Just check the category first and then the products corresponding to the category.

The shopping cart needs to be a separate variable object (map). The key is the product ID and the value is the quantity. You can directly access the corresponding quantity in the template.