Question

我需要在ngif中使用localstorage值。

我该怎么办..我尝试了各种方法，但无法获得..

下面是我的代码

<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文件：当我打印值时，它会显示admin，但也无法正常工作...

需要帮助。有人可以帮助我

readLocalStorageValue(key) {
  let value =   localStorage.getItem(key);
  console.log("-------"+value);

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

Answer 1

首先，您的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-template时正在使用ng-container。使用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>

Answer 2

我认为您可以直接在ngIf='localStorage.getItem(key) === "admin"'内部执行* ngIf，因为它将执行与当前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();
    }

}

上面的服务是您构建逻辑以更新行为主题中的localStorage值的地方。然后，您可以订阅这样的更改：

    constructor(private storageService: LocalStorageService){
       this.storageService.getMessage().subscribe(()=>{ // Update local state here when an update has been found. });
    }

Answer 3

这是我的方法，我也建议使用可观察对象来监听本地存储的更改

Demo

注意：在演示中，我在ngOnInit中添加了行localStorage.setItem('role', "admin");以手动将角色添加为admin，您可以验证div元素仅在角色设置为admin时显示。出现

组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  checkStatus: boolean;

  public localStorageItem(): boolean {
    if (localStorage.getItem("role") === "admin") {
      return true
    } else {
      return false;
    };
  }
  ngOnInit() {
    this.checkStatus = this.localStorageItem();
  }
}

HTML

<div *ngIf="checkStatus">
  .
  .
<div>

如何在ngif中使用localstorage值

3 个答案: