web-dev-qa-db-ja.com

Angular 2テンプレートでlocalStorage値を取得する方法

これが私のコードです、

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>

ファイルcomponent.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)
    )

すべてのコメントは独立して高評価と低評価を切り替えることができますが、表示するステータスを決定するにはlocalStorageを使用する必要があります。たぶん：

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

残念ながら、それは間違った構文です。私は他のケースで動作しているゲッターを見つけ、参照はAngular2 HTML5テンプレート内のlocalStorage値を表示する方法？ 。

この場合、関数でget commentLike（）を使用できず、グローバル変数も使用できないため、私はそれを行うことを考えていません。どうすれば解決できますか？

angularlocal-storage
5
PaulHuang

*ngIf="localStorage.getItem(comment._Id) == 'liked'"を使用しようとすると、component.tsでthis.localStorageを見つけようとしますが、存在しないため、エラーがスローされます... localStorageのようなものは、必要な場所で使用するのが一般的であるため、簡単にアクセスできるglobal.tsに保存してください...

あなたのglobal.ts、次のような関数を追加します。

export class GlobalApp {

constructor() {}

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

component.ts：

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

export class MyComponent {

constructor (public app: GlobalApp)  {
  }
}

これで、グローバルに宣言された関数があるため、任意のテンプレートで簡単に使用できるようになりました。

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

localStorage[commentId]のようなlocalStorageを使用する正しい方法ではありません。ここで確認してください： Window.localStorage 。

SetItemとgetItemを使用する必要があります。

あなたのケースでは、モジュール marcj/angular2-localstorage を使用することをお勧めします。

コンポーネント内：

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

テンプレートで：

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