Angular 刷新后保持选中复选框

我有一个用户数组和每个用户一个复选框，如果我选中它，用户将获得一个新状态。如果刷新“浏览器”选项卡，则无法对其进行检查。在这种情况下，我不能使用单选按钮。如果我添加一个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>

编辑

其中一个不是特级，但都经过检查

---

我只想检查高级用户。

我想如果检查其中一个用户，您会看到所有用户都被检查，因为该模型不考虑不同的用户

尝试更改

选中的
变量，以将用户id作为键

选中：{[userId:string]：boolean}={}

键（userId）的类型为string，值为boolean。e、 g.选中的可以是：
{someUserId1:false，someUserId2:false，someUserId3:true}

意思是这样的：
HTML

我还没有按原样测试代码，您可能需要修改它。
您是否可以写入和读取localStorage？我不知道用户是否从某个数据库中提取，但为了在刷新后保存数据，您需要将状态保存到某个位置，在我取消选中之前，我必须一直检查这些状态。o您的意思是，您需要在刷新浏览器后重设状态？因此，如果已选中，您需要在浏览器刷新时取消选中它？它们必须始终处于选中状态，直到我取消选中它们为止，即使我刷新浏览器或关闭它，因为它绑定到“事件”，并且我需要它来更新状态
  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();
  }

    <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();
  }