如何在ngif中使用localstorage值
我需要在ngif中使用本地存储值。
我该怎么做呢..我尝试了各种方法，但都不能得到..
下面是我附加的代码
<ng-template *ngIf="readLocalStorageValue('Role')== 'admin'">
<button
class="btn btn-primary editable-table-button btn-xs"
(click)="updatetq(tq_list.cmslearntopicid, tq_list.cmslearnchapterid,tq_list.topicname);"
>Edit</button>
<button
class="btn btn-danger editable-table-button btn-xs"
(click)="deletet(tq_list.cmslearntopicid);"
>Delete</button>
</ng-template>下面也是ts文件:当我打印值，然后它显示管理，但它也不工作…
需要帮助..有人能帮帮我吗？
readLocalStorageValue(key) {
let value = localStorage.getItem(key);
console.log("-------"+value);
if(value == undefined) {
value =='';
}
return value;
}回答 2
Stack Overflow用户
发布于 2018-07-25 22:56:57
首先，您的readLocalStorageValue(key)过于复杂。
您可以只使用：
readLocalStorageValue(key) {
return localStorage.getItem(key);
}其次，如果没有必要，不要在模板中使用函数，因为角度变化检测将导致它们多次执行。当您的控制台日志被多次打印时，您可能已经看到了。因此，您应该将readLocalStorageValue方法的结果存储在像role这样的变量中，并使用该变量代替带有*ngIf的模板中的方法
有关该主题的更多信息，请单击此处https://blog.appverse.io/why-it-is-a-bad-idea-to-use-methods-in-the-html-templates-with-angular-2-30d49f0d3b16
第三。当您应该使用ng-container时，您正在使用ng-template。使用ng-template标记您定义了一个模板，但是您没有使用它，因此不会呈现任何内容。您希望在*ngIf中使用的是ng-container
我知道这很让人困惑，所以最好去看看这篇文章https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
您的组件代码应为：
role: string;
ngOnInit(){
this.role = this.readLocalStorageValue('Role');
}
readLocalStorageValue(key: string): string {
return localStorage.getItem(key);
}您的模板代码应为：
<ng-container *ngIf="role==='admin'">
<button class="btn btn-primary editable-table-button btn-xs" (click)="updatetq(tq_list.cmslearntopicid
,tq_list.cmslearnchapterid,tq_list.topicname);">Edit</button>
<button class="btn btn-danger editable-table-button btn-xs" (click)="deletet(tq_list.cmslearntopicid);">Delete</button>
</ng-container>Stack Overflow用户
发布于 2018-07-25 22:56:02
我认为您可以直接从ngIf中执行*ngIf='localStorage.getItem(key) === "admin"'，因为它将执行与当前readLocalStorageValue()方法相同的验证，并在localStorage更新时进行更改。
或者，您可以使用通过注入传递到组件状态中的服务和behavior subject。
@Injectable()
export class LocalStorageService {
private subject = new Subject<any>();
notifyLocalComponents(message: string) {
this.subject.next({text: message});
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}在上面的服务中，您可以构建逻辑来更新behaviour主题中的localStorage值。然后，您可以订阅如下所示的更改：
constructor(private storageService: LocalStorageService){
this.storageService.getMessage().subscribe(()=>{ // Update local state here when an update has been found. });
}https://stackoverflow.com/questions/51521696
复制相似问题
腾讯云开发者
