刷新后保留选中的复选框

Question

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

TS

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

编辑

其中一个不是 premium，但两个都经过检查。

我只想勾选高级用户。

Answer 1

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

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

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

key(userId)为string类型，值为boolean。例如检查可以是：{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>

TS

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

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

刷新后保留选中的复选框

Keep checked checkboxes after refresh

checkbox

events

angular