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

【问题标题】：Hide/Show a checkbox based on json value隐藏/显示基于 json 值的复选框
【发布时间】：2020-03-31 03:01:43
【问题描述】：

我有 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

由于我将名称命名为传单，因此只有传单复选框将显示给用户，而所有其他复选框不会显示给用户。

【问题讨论】：

我正在使用响应式表单。

标签： javascript json typescript angular-material

【解决方案1】：

您的问题没有得到解决。您正在使用 Mat-checkbox 而不使用 JSON 文件如果你的 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>

希望它对你有用。快乐编码

【讨论】：