我需要在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;
}
发布于 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>
发布于 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
复制相似问题