web-dev-qa-db-fra.com

Comment obtenir la valeur localStorage dans Angular 2 gabarit

Voici mon code,

HTML:

<div *ngFor="let comment of comments | orderBy: '-'+orderBy">
    <div class="comment-item">
        <div class="row">
            <div class="col-md-8">
                {{comment.userName}}
            </div>
            <div class="col-md-4">
                <div class="comment-timeago">
                    {{comment.time | timeAgo}}
                </div>
                <div class="likedicon">
                    <i class="fa fa-heart-o disliked" aria-hidden="true" (click)="likeComment(comment._id, comment)"></i>
                    <i class="fa fa-heart liked" aria-hidden="true" *ngIf="comment.liked == 'liked'" (click)="dislikeComment(comment._id, comment)"></i>
                </div>
                <div class="like-num">
                    {{comment.like}}
                </div>
            </div>
        </div>
    </div>
</div>

Fichier composant.ts:

likeComment(commentId, comment) {

    localStorage[commentId] = "liked";
    comment.liked = localStorage[commentId];
    comment.like ++;
    this.dataService.likeComment(commentId).subscribe(
        // Post data to server
        error => console.log(error)
    )
}

dislikeComment(commentId, comment) {
    localStorage[commentId] = "disliked";
    comment.liked = localStorage[commentId];
    comment.like --;
    this.dataService.dislikeComment(commentId).subscribe(
        // Post data to server
        error => console.log(error)
    )

Chaque commentaire peut basculer entre aimé ou non, mais je dois utiliser localStorage pour décider quel statut doit s'afficher. Peut-être aimer:

*ngIf="localStorage.getItem(comment._Id) == 'liked'"

Malheureusement, c'est la mauvaise syntaxe. Je trouve que le getter fonctionne sur mon autre cas et que la référence provient deAngular2 Comment afficher la valeur localStorage dans un modèle HTML5?.

Dans ce cas, je n'ai aucune idée de faire cela, car je ne peux pas utiliser get commentLike () dans ma fonction, ni utiliser une variable globale. Comment puis-je le résoudre?

angularlocal-storage
3
PaulHuang

Lorsque vous essayez d'utiliser *ngIf="localStorage.getItem(comment._Id) == 'liked'", il essaie de trouver this.localStorage dans composant.ts, mais il n'existe pas. Une erreur est donc générée ... Il est courant d'utiliser localStorage partout où vous le souhaitez, conservez-le ainsi. qui peut être consulté facilement ...

Dans votre global.ts, ajoutez une fonction comme celle-ci:

export class GlobalApp {

constructor() {}

public localStorageItem(id: string): string {
    return localStorage.getItem(id);
}

Maintenant, mettez à jour votre component.ts:

import {GlobalApp} from '../helpers';

export class MyComponent {

constructor (public app: GlobalApp)  {
  }
}

Il est maintenant prêt à être utilisé facilement dans n’importe quel modèle car nous avons une fonction déclarée globale:

*ngIf="app.localStorageItem(comment._Id) == 'liked'"
11
mayur

Ce n'est pas la bonne façon d'utiliser localStorage comme localStorage[commentId]. Vous devriez le vérifier ici: Window.localStorage .

Vous devez utiliser setItem et getItem.

Pour votre cas, je vous suggère d'utiliser le module marcj/angular2-localstorage .

En composant:

@LocalStorage() public comments:any = [];

Dans votre modèle:

*ngIf="comments[index]._id == 'liked'"
0
liwei