'any[]' 类型的参数不能分配给 'string' 类型的参数答案

【问题标题】：Argument of type 'any[]' is not assignable to parameter of type 'string''any[]' 类型的参数不能分配给 'string' 类型的参数
【发布时间】：2020-07-27 14:27:27
【问题描述】：

我正在尝试使用以下代码设置 items 数组并推送到 localStorage：

public onSubmit(thumbnail, quantity, product_name, product_price){

const data = {
   thumbnail,
   quantity,
   product_name,
   product_price
};

localStorage.setItem(this.items, JSON.stringify(data));
this.items.push(JSON.parse(localStorage.getItem(data)));
}

我收到以下错误：

“any[]”类型的参数不能分配给“string”类型的参数。

for localStorage.setItem(this.items, JSON.stringify(data));

类型参数 '{ thumbnail: any;数量：任意；产品名称：任何；产品价格：任何； }' 不可分配给“字符串”类型的参数。

for this.items.push(JSON.parse(localStorage.getItem(data)));

在我的 HTML 中：

<tr *ngFor="let item of items;">
<td>
<td><img src="../assets/images/gallery/{{item.thumbnail}}" /></td>
<td>{{item.quantity}} </td>
<td>{{item.product_name }}</td>
<td>{{item.product_price}} </td>
<td>{{item.quantity * item.product_price }}</td>
</tr>

【问题讨论】：

setItem() 键参数的类型必须为 string developer.mozilla.org/en-US/docs/Web/API/Storage/setItem
在函数之外我有 items = [];

标签： angular

【解决方案1】：

当您查看setItem 的definition 时，您会发现问题：

storage.setItem(keyName, keyValue);

Parameters

keyName
    A DOMString containing the name of the key you want to create/update.
keyValue
    A DOMString containing the value you want to give the key you are creating/updating.

keyName 应该是一个字符串。您使用 this.items 作为参数，显然是一个数组。

相反，您可以尝试类似的方法

localStorage.setItem('items', JSON.stringify(data));
this.items.push(JSON.parse(localStorage.getItem('items')));

更新：我不应该说你可能不想在你的 Angular 组件中直接使用localStorage。至少将其外包给服务。更多详情，请查看this question。

【讨论】：

谢谢，fjc。您的解决方案有效，但似乎没有保存到 localStorage。我无法检查，因为我处于开发模式，所以每次刷新页面时，都会重新编译。我可以使用 splice 函数删除告诉我它是数组而不是存储项的产品。
另一个问题是，在我使用 splice 和 localStorage.clear(); 删除产品后，即使它们应该已经被清除，总计仍然会更新为以前的价格。我知道我应该在单击删除按钮时使用 localStorage.removeItem('') 但为了进行测试，我正在清除所有数据。
我将我的代码部署到了网络上，但它没有使用本地存储。当我刷新页面时，购物车中的商品消失了。
@MaureenMoore 我认为我们需要更多代码才能理解。

【解决方案2】：

你应该使用一些字符串键来通过这个键在本地存储中存储一些东西。我相信您想将项目存储在本地存储中。它看起来像这样：

storageKey = 'MyDataStorageKey';
public onSubmit(thumbnail, quantity, product_name, product_price){

  const data = {
   thumbnail,
   quantity,
   product_name,
   product_price
  };
  this.items.push(data);


  localStorage.setItem(this.storageKey, JSON.stringify(this.items));
}

ngOnInit() {
  const itemsStr = localStorage.getItem(this.storageKey);

  this.items = itemsStr ? JSON.parse(itemsStr) : []; 
}

【讨论】：

我收到以下错误消息：'any[]' 类型的参数不可分配给'string' 类型的参数。 for localStorage.setItem(this.storageKey, this.items);
我在控制台也收到错误：localStorage.get is not a function for const itemsStr = localStorage.get(this.storageKey);
原谅我。我修复了问题并更新了答案。现在它应该可以工作了
感谢 Andrei 现在没有错误，但我仍然可以使用拼接功能删除一个项目，如果它被保存到 localStorage，我需要使用 localStorage.removeItem
如果你修改了一个数组（拼接、推送、连接，基本上任何东西）然后再次评估“写入本地存储代码”。 localStorage.setItem(this.storageKey, JSON.stringify(this.items));

【解决方案3】：

问题在于将数据保存到本地存储时。 localstorage setItem 方法需要两个参数，第一个是本地存储中的属性名称，第二个是要保存的数据。

正确的使用方法是

localStorage.setItem('myCat', JSON.stringify(data));

更多例子可以在docs找到

【讨论】：

【解决方案4】：

这不起作用，所以它不是一个答案，但它包含代码，所以它不能进入评论现在产品已保存到 localStorage，我需要删除该项目。我正在使用

deleteItem(i){
localStorage.removeItem(i);
localStorage.setItem(i, JSON.stringify(this.items));
this.items.splice(i,1);
}

我从

得到函数的参数

<tr *ngFor="let item of items; let i = index">
<td>
<button type="button" (click)="deleteItem(i)">X</button></td>
</tr>

【讨论】：