Question

我有一系列具名人物的对象。我正在尝试禁用按钮，即使刷新页面后也应保持禁用状态。请帮助

    <div *ngFor="let item of people">
      <button [disabled]="item.disabled"(click)="item.disabled=true">Hi</button> 
    </div>

Answer 1

刷新页面类似于重新启动单页面Web应用程序。刷新时，默认情况下会重置组件和对象状态。如果您希望对象状态在刷新后仍然存在，则只需要通过本地或会话存储来存储它，或者从OnInit的外部服务中获取它即可。

Answer 2

尝试使用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))
  }
}

Working Demo

即使刷新页面后，我也想禁用按钮

2 个答案: