Aquí está mi código,
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>Archivo componente.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) )Cada comentario puede cambiar de Me gusta o No me gusta de forma independiente, pero tengo que usar localStorage para decidir qué estado se debe mostrar. Tal vez como:
*ngIf="localStorage.getItem(comment._Id) == 'liked'"Desafortunadamente, es la sintaxis incorrecta. Encuentro el captador trabajando en mi otro caso, y la referencia es de Angular2 ¿Cómo mostrar el valor de almacenamiento local dentro de la plantilla HTML5? .
En este caso, no tengo idea de hacer eso, porque no puedo usar get commentLike() en mi función, ni usar una variable global. ¿Cómo lo soluciono?
Cuando intenta usar *ngIf="localStorage.getItem(comment._Id) == 'liked'" , está tratando de encontrar this.localStorage en component.ts, pero no existe, por lo que arroja un error. Cosas como localStorage son comunes para usar donde sea necesario, así que guárdelo en global.ts, al que se puede acceder fácilmente...
En su global.ts , agregue una función como esta:
export class GlobalApp { constructor() {} public localStorageItem(id: string): string { return localStorage.getItem(id); } Ahora actualice su component.ts :
import {GlobalApp} from '../helpers'; export class MyComponent { constructor (public app: GlobalApp) { } }Ahora está listo para usar fácilmente en cualquier plantilla, ya que tenemos una función declarada global:
*ngIf="app.localStorageItem(comment._Id) == 'liked'"No es la forma correcta de usar localStorage como localStorage[commentId] . Debería comprobarlo aquí: Window.localStorage .
Debe usar setItem y getItem.
Para su caso, le sugiero que use el módulo marcj/angular2-localstorage .
En componente:
@LocalStorage() public comments:any = [];En tu plantilla:
*ngIf="comments[index]._id == 'liked'"@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'); }