将 array.from() 与本地存储中的元素一起使用 (Angular)答案

【问题标题】：Using array.from() with element in local storage (Angular)将 array.from() 与本地存储中的元素一起使用 (Angular)
【发布时间】：2020-10-22 10:21:50
【问题描述】：

我正在尝试创建一个数组，其元素数量取决于存储在本地存储中的值，但我不完全知道如何使用array.from() 方法正确引用它。我需要生成一些带有 2 个复选框的输入字段，然后将所有内容存储在一个数组中。但我卡住了：

组件.TS：

constructor() {
    this.showStorage = JSON.parse(localStorage.getItem("flightdetails")) || {};
   }

public passengers = Array.from({ length: parseInt(localStorage['flightdetails.passengersNumber']) }, _ => 
({ name: '', child: false, luggage: false })); //**here is what I have but it does not work**
The number of passengers is stored as passengersNumber in localStorage

HTML 组件：

<li *ngFor="let passenger of passengers; let i=index">
  <input type="text" [name]="'name_' + 1" [(ngModel)]="passenger.name" placeholder="Name and surname">
  <input type="checkbox" [checked]="passenger.child" (change)="passenger.child = !passenger.child">Child
  <input type="checkbox" [checked]="passenger.luggage" (change)="passenger.luggage = ! passenger.luggage">Luggage
</li>

感谢您对解决此问题的任何支持！

【问题讨论】：

标签： javascript arrays angular local-storage

【解决方案1】：

localStorage['flightdetails.passengersNumber'] 正在 localStorage 中查找键为“flightdetails.passengersNumber”的条目。您需要先解析它以访问存储对象的属性因为它是一个字符串JSON.parse(localStorage.getItem("flightdetails")).passengersNumber

【讨论】：

【解决方案2】：

我不确定我是否理解您的需要，但您可以尝试更改此行

    public passengers = Array.from({ length: parseInt(localStorage['flightdetails.passengersNumber']) }, _ => ({ name: '', child: false, luggage: false }));

到：

public passengers = Array.from({ length: (JSON.parse(localStorage['flightdetails']||'{}')).passengersNumber || 2 }, _ => ({ name: '', child: false, luggage: false }));

【讨论】：

【解决方案3】：

您确定localStorage 中有flightdetails.passengersNumber 的值吗？ localStorage 是一个键值存储。所以如果有为键abc存储的值，则可以在abc.def下存储一个完全不相关的对象。如果你想访问flightdetails.passengersNumber，就必须为这个密钥存储一些东西。

如果你想让它依赖于localStorage['flightdetails']中的对象，你可以使用Array.from({ length: this.showStorage.passengersNumber}, ...)

另外，作为旁注，最好始终使用 parseInt(x, 10) 而不是 parseInt(x) 与 radix 参数（否则带有前导 0 的数字会将数字从八进制转换）。

【讨论】：