我有一系列具名人物的对象。我正在尝试禁用按钮,即使刷新页面后也应保持禁用状态。请帮助
<div *ngFor="let item of people">
<button [disabled]="item.disabled"(click)="item.disabled=true">Hi</button>
</div>
答案 0 :(得分:1)
刷新页面类似于重新启动单页面Web应用程序。刷新时,默认情况下会重置组件和对象状态。 如果您希望对象状态在刷新后仍然存在,则只需要通过本地或会话存储来存储它,或者从OnInit的外部服务中获取它即可。
答案 1 :(得分:0)
尝试使用localStorage
:
HTML代码:
<div *ngFor="let item of people">
<button mat-stroked-button color="primary" [disabled]="item.disabled" (click)="disableItem(item)">Hi</button>
</div>
<button mat-stroked-button color="primary" (click)="reset()">Reset</button>
TS代码:
import { Component } from '@angular/core';
export interface Section {
name: string;
updated: Date;
}
/**
* @title List with sections
*/
@Component({
selector: 'list-sections-example',
styleUrls: ['list-sections-example.css'],
templateUrl: 'list-sections-example.html',
})
export class ListSectionsExample {
people: any[] = [
{
name: 'Photos',
updated: new Date('1/1/16'),
},
{
name: 'Recipes',
updated: new Date('1/17/16'),
}
];
constructor() {
this.people = JSON.parse(localStorage.getItem('people'));
}
reset() {
this.people = [
{
name: 'Photos',
updated: new Date('1/1/16'),
},
{
name: 'Recipes',
updated: new Date('1/17/16'),
}
];
localStorage.setItem('people', JSON.stringify(this.people))
}
disableItem(data) {
data.disabled = true;
localStorage.setItem('people', JSON.stringify(this.people))
}
}