Я могу сохранять, читать или обновлять данные с помощью localstorage. Но я пытаюсь использовать модель для отображения всех пользователей (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')) 
  }
0
Mellville 24 Окт 2018 в 00:41

2 ответа

Лучший ответ

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

1
Jeto 23 Окт 2018 в 22:29

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

1
Pankaj Shukla 23 Окт 2018 в 22:31
52958224