Angular Checkbox - 无法获取数据库的值以匹配 html 复选框中的复选标记

Question

由于我还是编码和角度方面的新手，因此寻求您的帮助。

我有这个表格，可以让我做 CRUD 数据。

在添加数据时，我有几个复选框，我可以设法将其成功存储在数据库中。

但是，当我尝试编辑数据时，复选框不再显示基于表中数据的复选标记。

我有一个模态表单，我很难将复选框中的数据与数据库中的数据匹配。

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

这是我打开编辑按钮时的示例屏幕截图。

sample screenshot

我知道它没有显示复选标记的原因是因为 getPlacardDetails() 显示错误值。

您有什么方法可以推荐我可以解决此问题的方法吗？

我的资源和逻辑都快用完了，哈哈。

抱歉，我还没有经验，我还有很多东西要学。

提前谢谢你！

Answer 1

使用复选框的“checked”属性使其被选中。代码如下：

<input type="checkbox" name="{{item.id}}" [(ngModel)]="item.isselected" [checked]="item.isselected">

更多详情请参考以下链接：

Angular 5, HTML, boolean on checkbox is checked