带有 if 条件的 Angular ngModel答案

【问题标题】：Angular ngModel with an if condition带有 if 条件的 Angular ngModel
【发布时间】：2021-04-07 17:13:01
【问题描述】：

我是 Angular 的新手，我正在尝试编写一个显示复选框列表的代码。如果未选中该复选框，它将不会显示在列表中。我正在使用 ngModel 从接口中获取数据。我尝试使用 *ngIf 仅显示选中的复选框，但它不起作用。我该如何解决这个问题？

HTML：

<div fxFlex fxLayout="row">
                        <div fxLayout="column" class="pr-40 pl-20">
                            <mat-checkbox class="mt-24 pr-4" disabled name="IsTakenColdEnvironment"
                                [(ngModel)]="rawMaterialInformation.IsTakenColdEnvironment">
                                Açıldığında -18 C Alınmalı
                            </mat-checkbox>
                            <mat-checkbox class="mt-24" disabled name="IsOlfactory"
                                [(ngModel)]="rawMaterialInformation.IsOlfactory">
                                Koku Alan
                            </mat-checkbox>
                            <mat-checkbox class="mt-24" disabled name="IsMetalEffective"
                                [(ngModel)]="rawMaterialInformation.IsMetalEffective">
                                Metal Kontrolü
                            </mat-checkbox>

enter image description here

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

在您的复选框中添加*ngIf="your_condition"。

<mat-checkbox class="mt-24" disabled name="IsMetalEffective" *ngIf="rawMaterialInformation.IsMetalEffective"
    [(ngModel)]="rawMaterialInformation.IsMetalEffective">
    Metal Kontrolü
</mat-checkbox>

【讨论】：