Angular 6: невозможно отобразить значения, извлекающие localStorage - PullRequest
Новая
       33

Angular 6: невозможно отобразить значения, извлекающие localStorage

0 голосов
/ 24 октября 2018

Я могу сохранять, читать или обновлять данные с помощью localalstorage.Но я пытаюсь использовать модель для отображения всех пользователей (id и userName) с директивой * 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')) 
  }

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Вы можете иметь следующий файл 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, как показано в коде.

0 голосов
/ 24 октября 2018

Вам необходимо дать вашему входу имя, например #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

...