Javascript 加载页面时选中的复选框

我在数据库中有

RoleClaimValue

表，它有

RoleID

和

ClaimValue

我想在用户进入页面时预选复选框

我在HTML中使用此代码：

<div *ngFor="let sub of subRoles" id="checkbox">
    <p-checkbox *ngIf="sub.rolelevel === role.id" selected="selectedSubRole" [value]="sub.id" [(ngModel)]="selectedSubRole" inputId="selectedSubRole" label="{{sub.description}}"></p-checkbox>
</div>

this。选择了带有
ClaimValue列表的子文件

ClaimValue:[“1006”、“1009”、“1006”]

我正在使用此代码，但不起作用，并且没有预选复选框。
有什么问题吗？如何解决这个问题？
根据我从您的问题中注意到的情况，可以是：

export class AppComponent {
  value: boolean = true;
  subRoles : SubRole[] = []
  selectedSubRoles = [] ;

  role = {
    id: 1
  }

  constructor(){
    this.getSubRoles().subscribe(data => {
      this.subRoles = data;
    })
    this.GetRoleClaim(this.role.id);
  }

  getDatas(id):Observable<any>{
    return of([
        'val1',
        'val4',
        'val3'
      ]).pipe(delay(1000));
  }

  getSubRoles():Observable<any>{
    return of([
      {
        id: 'val1',
        rolelevel: 1,
        description: 'check 1'
      },
      {
        id: 'val2',
        rolelevel: 1,
        description: 'check 2'
      },
      {
        id: 'val3',
        rolelevel: 2,
        description: 'check 3'
      },
      {
        id: 'val4',
        rolelevel: 1,
        description: 'check 4'
      }
    ]).pipe(delay(1000));
  }

  GetRoleClaim(id:number){
    this.getDatas(id).subscribe((data)=>{
    this.selectedSubRoles = data
    this.subRoles.forEach((el , index)=>{
      el.checked = this.selectedSubRoles.some(e => el.id === e)
    })
    console.log(this.subRoles)
   });
  }
}

interface SubRole {
  id:string,
  rolelevel:number,
  description:string,
  checked ?:boolean
}

导出类AppComponent{
值：boolean=true；
子角色：子角色[]=[]
SelectedSubcles=[]；
角色={
身份证号码：1
}
构造函数（）{
this.getsubcles（）.subscribe（数据=>{
这个.subRoles=数据；
})
this.GetRoleClaim（this.role.id）；
}
getDatas（id）：可观察的

告诉我是否有任何问题。
这是什么意思？'this.selectedSubRole=[…data]'然后：循环'data'和'this.selectedSubRole.push（el）'r您需要根据*ngIf=“sub.rolelevel==role.id”条件选中复选框。this.selectedSubRole是否匹配sub.id（[value]=“sub.id”）？@RamAnji不是。不是为了这个。@ThomsheerAhamed他们不匹配。你检查演示了吗？问题=>复选框没有选中你想选中3个复选框吗？你的问题不够清楚，请解释你想要什么，或者应该关闭。我的问题非常清楚。我想选择它需要的值从数据库中。何时何地获取子角色数组？
export class AppComponent {
  value: boolean = true;
  subRoles : SubRole[] = []
  selectedSubRoles = [] ;

  role = {
    id: 1
  }

  constructor(){
    this.getSubRoles().subscribe(data => {
      this.subRoles = data;
    })
    this.GetRoleClaim(this.role.id);
  }

  getDatas(id):Observable<any>{
    return of([
        'val1',
        'val4',
        'val3'
      ]).pipe(delay(1000));
  }

  getSubRoles():Observable<any>{
    return of([
      {
        id: 'val1',
        rolelevel: 1,
        description: 'check 1'
      },
      {
        id: 'val2',
        rolelevel: 1,
        description: 'check 2'
      },
      {
        id: 'val3',
        rolelevel: 2,
        description: 'check 3'
      },
      {
        id: 'val4',
        rolelevel: 1,
        description: 'check 4'
      }
    ]).pipe(delay(1000));
  }

  GetRoleClaim(id:number){
    this.getDatas(id).subscribe((data)=>{
    this.selectedSubRoles = data
    this.subRoles.forEach((el , index)=>{
      el.checked = this.selectedSubRoles.some(e => el.id === e)
    })
    console.log(this.subRoles)
   });
  }
}

interface SubRole {
  id:string,
  rolelevel:number,
  description:string,
  checked ?:boolean
}

<div *ngFor="let sub of subRoles" id="checkbox">
  <p-checkbox *ngIf="sub.rolelevel === role.id" 
              [(ngModel)]="sub.checked"
              binary="true" 
              label="{{sub.description}}"
            >
  </p-checkbox>
</div>