</p> <p>HTML、2角度テンプレートここ

Question

私のコードがある中でのlocalStorage値を取得する方法：

<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 How to display localStorage value inside HTML5 template?です。

この場合、私は関数内でcommentLike（）を使用することができず、グローバル変数も使用しないので、これを行うことはできません。どうすれば解決できますか？

Answer 1

あなたはcomponent.tsでthis.localStorageを見つけるためにしようとしている *ngIf="localStorage.getItem(comment._Id) == 'liked'"を使用しようとしている

が、それは存在しません。だから、エラーを投げています... localStorageのようなものは、必要な場所であればいつでも使用するのが一般的ですので、簡単にアクセスできるglobal.tsに保管してください...

In your global.ts、このように機能を追加します。

export class GlobalApp { 

constructor() {} 

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

は、今すぐあなたのcomponent.tsを更新：

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

Answer 2

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

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

あなたの場合は、モジュールmarcj/angular2-localstorageを使用することをおすすめします。テンプレートで

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

：コンポーネントで

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