刷新后保持选中的复选框答案

【问题标题】：Keep checked checkboxes after refresh刷新后保持选中的复选框
【发布时间】：2021-01-18 20:54:05
【问题描述】：

我有一组用户和每个用户一个复选框，如果我选中它，用户就会获得一个新状态。如果我刷新浏览器选项卡，我将无法检查它们。在这种情况下，我不能使用单选按钮。如果我添加一个 foreach 它可以工作，但所有的复选框都被选中

HTML

       <tr scope="row" *ngFor="let user of users">
        <td class="w-25">
          <input
            class="check-btn"
            type="checkbox"
            name="premium"
            [checked]="checked"
            [ngModel]="checked"
            (click)="
              eventChecked($event.target.checked ? '1' : '0', user.id)
            "
          />
        </td>
        <td class="w-50">{{ user.name }}</td>
      </tr>

  users: IUser[];
  checked: any;

  constructor(
    private userService: UserService,

  ) {}

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers() {
    this.userService.getUsers().subscribe(
      (data) => {
        this.users = data;
        console.log(data);
        this.users.forEach(e => {
        if(e.premium == 1){
          this.checked = true;
          console.log(this.checked);          
         }
       });         
      },
      (error) => {
        console.log(error);
      }
    );
  }
  
  eventChecked(event: any, id: number) {
    console.log(id, event);
    this.checked = true;
    this.userService.editUser(event, id).subscribe();
  }

编辑

其中一个不是高级的，但都已检查。

我只想检查高级用户。

【问题讨论】：

你可以读写localStorage吗？我不知道用户是否是从某处的数据库中获取的，但是为了在刷新后保存数据，您需要将状态保存在某处
不，我必须一直选中它们，直到我取消选中
你的意思是刷新浏览器后需要重置状态吗？那么，如果勾选了，刷新浏览器是否需要取消勾选呢？
它们必须始终处于选中状态，直到我取消选中它们，即使我刷新浏览器或关闭它，因为它绑定到“事件”并且我需要它来更新状态

标签： angular events checkbox

【解决方案1】：

我想你看到如果其中一个被选中，所有都被选中，因为模型没有考虑不同的用户。

尝试更改 checked 变量以将用户的 id 作为键

checked: {[userId:string]: boolean} = {};

键（userId）是字符串类型，值是布尔值。例如检查可以是：{someUserId1: false, someUserId2: false, someUserId3: true};

意思是这样的： HTML

    <tr scope="row" *ngFor="let user of users">
            <td class="w-25">
              <input
                class="check-btn"
                type="checkbox"
                name="premium"
                [checked]="checked[user.id]"
                [ngModel]="checked[user.id]"
                (click)="
                  eventChecked($event.target.checked ? '1' : '0', user.id)
                "
              />
            </td>
            <td class="w-50">{{ user.name }}</td>
          </tr>

users: IUser[];
  checked: {[userId:string]: boolean} = {}; // the key is of type string, and the value is boolean. e.g. checked can be: {someUserId1: false, someUserId2: false};

  constructor(
    private userService: UserService,

  ) {}

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers() {
    this.userService.getUsers().subscribe(
      (data) => {
        this.users = data;
        console.log(data);
        this.users.forEach(e => {
        if(e.premium == 1){
          this.checked[e.id] = true;
          console.log(this.checked);          
         }
       });         
      },
      (error) => {
        console.log(error);
      }
    );
  }
  
  eventChecked(event: any, id: number) {
    console.log(id, event);
    this.checked[id] = true;
    this.userService.editUser(event, id).subscribe();
  }

我没有按原样测试代码，你可能需要修改它。

【讨论】：