Angular 6：无法显示获取 localStorage 的值答案

【问题标题】：Angular 6: can't display values fetching localStorageAngular 6：无法显示获取 localStorage 的值
【发布时间】：2019-03-28 05:35:50
【问题描述】：

我可以使用本地存储来保存、读取或更新数据。但我试图使用模型来显示所有用户（id 和用户名），并使用*ngFor 指令。但我得到错误：“只允许数组和迭代”。我错过了一些东西；有人可以帮帮我吗？

简单模型：

export interface User {
  id:number;
  userName:string;
}

HTML：

<input class="form-control" [(ngModel)]="test" >
      <button (click)="saveUser(test)" class=" btn btn-danger">SAVE</button>
<div>
  <button (click)="readUser(test)" class=" btn btn-danger">Read</button>
</div>
<div>
  <ul *ngFor="let user of test">
    <li>{{user.id}}</li>
    <li>{{user.userName}}</li>
  </ul>
</div>

以及组件类：

export class Testing implements OnInit {

  test: User[]=[];

  constructor() { }

  saveUser(user:string){

    localStorage.setItem('userName', JSON.stringify(user));

    console.log(user)
  }

  readUser(){
    console.log(JSON.parse(localStorage.getItem('userName')) 
  }

【问题讨论】：

有人吗？
您将输入（文本，因此是字符串）映射到数组。因此，当您在输入中键入字符时，数组会被相应的字符串覆盖，并且不再是数组，从而使 *ngFor 无法对其进行迭代。该输入到底应该做什么？向数组中添加用户？
是的，我想保存尽可能多的用户，然后显示他们

标签： arrays angular local-storage

【解决方案1】：

您需要为输入命名，例如#userInput，并将其值传递给saveUser：

<button (click)="saveUser(userInput.value)" ...>

saveUser 还必须将用户添加到您的test（应该是users）数组中。

脚本

export class Testing {
  private currentId = 0;
  test: User[] = [];

  saveUser(userName: string) {
    this.test.push({id: ++this.currentId, userName})
    // ...
  }
}

查看

<input #userInput class="form-control">
  <button (click)="saveUser(userInput.value)" class=" btn btn-danger">SAVE</button>
<div>
  <button (click)="readUser(test)" class=" btn btn-danger">Read</button>
</div>
<div>
  <ul *ngFor="let user of test">
    <li>{{user.id}}</li>
    <li>{{user.userName}}</li>
  </ul>
</div>

StackBlitz demo

【讨论】：

太棒了！非常感谢您的解释和stackBlitz。问候，杰托

【解决方案2】：

你可以有以下 ts 文件：

   test = '';
  _id = 0;
  users: User[] = [];

  constructor() { }

  saveUser(user: string) {
    this.users.push({id: this._id++, userName: this.test});

    localStorage.setItem('userName', JSON.stringify(this.users));

    console.log(user);
  }

  readUser() {
    console.log(JSON.parse(localStorage.getItem('userName')));
  }

以及以下模板（html）文件。

<input class="form-control" [(ngModel)]="test" >
      <button (click)="saveUser(test)" class=" btn btn-danger">SAVE</button>
<div>
  <button (click)="readUser(test)" class=" btn btn-danger">Read</button>
</div>
<div>
  <ul *ngFor="let user of users">
    <li>{{user.id}}</li>
    <li>{{user.userName}}</li>
  </ul>
</div>

请注意，您不能将test 视为一个数组。因为test与input标签绑定，是字符串而不是数组。

为了将某些东西视为 *ngFor 的数组，请引入另一个名为 users 的属性，如代码所示。

【讨论】：