Angular Checkbox - Cannot get the value of database to match the checkmarks in html checkbox

Looking for your kind assistance as I am still new to coding and angular.

I have this form which allows to me do CRUD data.

In adding the data, I have a several checkbox which I can manage to successfully stored in the database.

However, when I am trying to edit the data, the checkbox are no longer showing check markings based on the data in the table.

I have a Modal form and I am having a hard time matching the data in the checkbox to the ones in database.

Component.html

    <div>
        <div *ngFor="let item of _placarddetails">
            <input type="checkbox" name="{{item.id}}" [(ngModel)]="item.isselected">
            <label>&nbsp; {{item.name}}</label>
        </div>
    </div>

Component.TS

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

  loadPlacardQualityList(){
  this.service.getAllEdcmTicketNo().subscribe((data:any)=>{
  this.PlacardQualityList=data;
  this.PlacardQualityId=this.pq.PlacardQualityId;
  this.EdcmTicketNo=this.pq.EdcmTicketNo;
  this.PQDeliveryDate=this.pq.PQDeliveryDate;
  this.PlacardAppearance=this.pq.PlacardAppearance;
  this.PlacardDetails=this.pq.PlacardDetails ;
  this.PlacardAcceptance=this.pq.PlacardAcceptance;
  this.Inserts=this.pq.Inserts;
  this.CheckedBy=this.pq.CheckedBy;
  this.PowerProduct=this.pq.PowerProduct;
  this.Comment=this.pq.Comment;});
  this.
 }

addPlacardQuality()
{
  var val = {
    PlacardQualityId:this.PlacardQualityId, 
    EdcmTicketNo:this.EdcmTicketNo,
    PQDeliveryDate:this.PQDeliveryDate,
    PlacardAppearance:this.PlacardAppearance,
    PlacardDetails:this.PlacardDetails = this._placarddetails.filter(x=>x.isselected==true).map(x=>x.name).join(","),
    PlacardDetailsID:this.PlacardDetails = this._placarddetails.filter(x=>x.isselected==true).map(x=>x.name).join(","),
    Inserts:this.Inserts,
    CheckedBy:this.CheckedBy,
    PowerProduct:this.PowerProduct,
    Comment:this.Comment};
    this.service.addPlacardQuality(val).subscribe(res=>{alert(res.toString());
    });
  }

updatePlacardQuality(){
    var val = {
    PlacardQualityId:this.PlacardQualityId, 
    EdcmTicketNo:this.EdcmTicketNo,
    PQDeliveryDate:this.PQDeliveryDate,
    PlacardAppearance:this.PlacardAppearance,
    PlacardDetails:this.PlacardDetails = this._placarddetails.filter(x=>x.isselected==true).map(x=>x.name).join(","),
    Inserts:this.Inserts,
    CheckedBy:this.CheckedBy,
    PowerProduct:this.PowerProduct,
    Comment:this.Comment}
    this.service.updatePlacardQuality(val).subscribe(res=>{alert(res.toString());});
}

getPlacardDetails()
{
    this._placarddetails=[
   {id:1,name:"Company Name",isselected:false},
   {id:2,name:"Company Logo",isselected:false},
   {id:3,name:"Certification Level",isselected:false},
   {id:4,name:"Year",isselected:false},
   {id:5,name:"Badge Name",isselected:false},
   ]
}

class PDetail{
  id!: number;
  name!: string;
  isselected!: boolean;
}

Here is the sample screenshot whenever I open the edit button.

sample screenshot

I understand that the reason why it is not showing a checkmarks is because of the getPlacardDetails() which is showing false value.

Is there a way that you can recommend a method how I can fix this?

I'm running out of resources and logic lol.

Sorry, still in-experience and I still have lots to learn.

Thank you in advance!