隐藏/显示基于json值的复选框

Question

我有4个复选框，我想根据我在JSON中获取的值来隐藏/显示它们。我在JSON中只会得到一个复选框名称，并且只会向用户显示该特定复选框，并将其标记为选中状态。我怎样才能做到这一点？这是我的材料复选框代码

<div fxLayout="row wrap" class="py-8" fxLayoutAlign="space-evenly">
  <mat-checkbox>Fragile</mat-checkbox>
  <mat-checkbox>Flyer</mat-checkbox>
  <mat-checkbox>Time Stipulated</mat-checkbox>
  <mat-checkbox>Gift Wrapped</mat-checkbox>
</div>

这是我的json

由于我以传单的名字命名，因此只有传单复选框会显示为选中状态，而其他所有复选框都不会显示给用户。

Answer 1

问题未清除。您正在使用Mat-checkbox而不使用JSON文件 如果您的杰森会

SampleJson= [
{
    Name: "Fragile",
    isActive: true
},
{
    Name: "Flyer",
    isActive: true
},
{
    name: "Time Stipulated",
    isActive: true
},
{
    name: "Gift Wrapped",
    isActive: false
},

]

然后将您的html修改为

<div fxLayout="row wrap" class="py-8" fxLayoutAlign="space-evenly">
  <mat-checkbox [(ngModel)]="SampleJson[0].isActive">Fragile</mat-checkbox>
  <mat-checkbox [(ngModel)]="SampleJson[1].isActive">Flyer</mat-checkbox>
  <mat-checkbox [(ngModel)]="SampleJson[3].isActive">Time Stipulated</mat-checkbox>
  <mat-checkbox [(ngModel)]="SampleJson[0].isActive">Gift Wrapped</mat-checkbox>
</div>

希望它对您有用。编码愉快

Answer 2

 <div fxLayout="row wrap" class="py-8" fxLayoutAlign="space-evenly">
  <mat-checkbox id="Fragile">Fragile</mat-checkbox>
  <mat-checkbox id="Flyer">Flyer</mat-checkbox>
  <mat-checkbox id= "TimeStipulated">Time Stipulated</mat-checkbox>
  <mat-checkbox id="GiftWrapped">Gift Wrapped</mat-checkbox>
</div>




var value = val1.name;
    if(value=="Flyer")
    {
     $("#Flyer").prop('checked', 'true');
    }
    else if (value=="Fragile")
    {
     $("#Fragile").prop('checked', 'true');
    }
    else if (value=="TimeStipulated")
    {
     $("#TimeStipulated").prop('checked', 'true');
    }
    else if (value=="TimeStipulated")
    {
     $("#GiftWrapped").prop('checked', 'true');
    }