Question

这是我的代码，

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'"

不幸的是，它的语法错误。我发现getter正在处理我的其他情况，引用来自 Angular2 How to display localStorage value inside HTML5 template? 。

在这种情况下，我不知道这样做，因为我不能在我的函数中使用get commentLike（），也不使用全局变量。我该如何解决？

Answer 1

当您尝试使用*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'"

Answer 2

使用像localStorage[commentId]这样的localStorage不是正确的方法。你应该在这里查看：Window.localStorage。

您应该使用setItem和getItem。

对于您的情况，我建议您使用模块marcj/angular2-localstorage。

在组件中：

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

在你的模板中：

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

Answer 3

@Component({
 selector:'app-any',
 templates:`<div *ngIf="localStorageAlice.getItem('key')">...</div>`
})
export class MyComponent {

 localStorageAlice = localStorage; 
 // to access localStorage in html use localStorageAlice.getItem('key');
}

Answer 4

或者，您可以像这样使用

在您的组件中：

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

在您的模板中：

getItem ( item ) { 
       return localStorage.getItem(item)
  }

如何在Angular 2模板中获取localStorage值

4 个答案: