首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在ngif中使用localstorage值

如何在ngif中使用localstorage值
EN

Stack Overflow用户
提问于 2018-07-25 22:41:32
回答 2查看 5.9K关注 0票数 3

我需要在ngif中使用本地存储值。

我该怎么做呢..我尝试了各种方法,但都不能得到..

下面是我附加的代码

代码语言:javascript
复制
<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文件:当我打印值,然后它显示管理,但它也不工作…

需要帮助..有人能帮帮我吗?

代码语言:javascript
复制
readLocalStorageValue(key) {
  let value =   localStorage.getItem(key);
  console.log("-------"+value);

  if(value == undefined) {
    value =='';
  }
  return value;
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-25 22:56:57

首先,您的readLocalStorageValue(key)过于复杂。

您可以只使用:

代码语言:javascript
复制
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/

您的组件代码应为:

代码语言:javascript
复制
role: string;

ngOnInit(){
    this.role = this.readLocalStorageValue('Role');
}

readLocalStorageValue(key: string): string {
    return localStorage.getItem(key);
}

您的模板代码应为:

代码语言:javascript
复制
<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>
票数 5
EN

Stack Overflow用户

发布于 2018-07-25 22:56:02

我认为您可以直接从ngIf中执行*ngIf='localStorage.getItem(key) === "admin"',因为它将执行与当前readLocalStorageValue()方法相同的验证,并在localStorage更新时进行更改。

或者,您可以使用通过注入传递到组件状态中的服务和behavior subject

代码语言:javascript
复制
@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值。然后,您可以订阅如下所示的更改:

代码语言:javascript
复制
    constructor(private storageService: LocalStorageService){
       this.storageService.getMessage().subscribe(()=>{ // Update local state here when an update has been found. });
    }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51521696

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档