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

Posted 2023-03-13

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

【英文标题】：Angular Checkbox - Cannot get the value of database to match the checkmarks in html checkbox

【发布时间】：2021-11-03 07:07:54

【问题描述】：

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

我有这个表格，可以让我做 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() 显示错误值。

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

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

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

提前谢谢你！

【参考方案1】：

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

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

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

Angular 5, html, boolean on checkbox is checked