Я хочу отключить кнопку даже после обновления страницы

Question

У меня есть массив объектов именованных людей.Я пытаюсь отключить кнопку должна оставаться отключенной даже после обновления страницы.Просьба помочь

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

Answer 1

Обновление страницы аналогично перезапуску вашего одностраничного веб-приложения. При обновлении ваши компоненты и состояния объектов сбрасываются по умолчанию. Если вы хотите, чтобы состояние объекта сохранялось при обновлении, вам просто нужно сохранить его через локальное хранилище или хранилище сеанса или извлечь его из внешней службы по адресу 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