javascript - 隐藏/显示基于 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

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

标签： javascriptjsontypescriptangular-material

Answer 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>

希望对你有效。快乐编码