Angular 8-* ngIf和mat-checkbox不起作用

时间:2019-07-16 13:27:41

标签: angular checkbox angular-material angular-ng-if

我在Angular Material Checkbox中遇到问题,我认为这是相对简单的事情,但是由于某些原因,我无法使其正常工作。

我有一个div,我只想在选中mat-checkbox时显示,但是它似乎不希望与* ng一起使用,即使我在这里找到了一个可以工作的示例:https://stackblitz.com/edit/angular-mat-checked?file=app%2Fcheckbox-overview-example.html

我尝试将非常相似的代码应用于我的项目,但是它似乎并不想工作,也没有尝试过其他任何事情。

        <mat-checkbox [(ngModel)]="checked" [checked]="false">
          I agree to {{clientName}} storing my details.
          <a href="#" target="_blank">View full terms & conditions</a>
        </mat-checkbox>

        <div *ngIf="checked" id="contactOptionsGroup">
          <p>Stay updated with news, features, and offers related to {{clientName}}.</p>
          <mat-checkbox>Phone</mat-checkbox>
          <mat-checkbox>Email</mat-checkbox>
        </div>

似乎可以通过选中和取消选中来显示和隐藏此div应该相对简单,但我似乎很困惑。我可能会遗漏一些完全显而易见的内容,但看不到它可能是什么。

在项目的后面还将有此功能的另一个实例,因此它们将需要彼此独立地工作。

如果有人有帮助或建议,我将永远感激不已。

1 个答案:

答案 0 :(得分:1)

您不需要在component中定义变量。您还可以引用该复选框

<mat-checkbox #termsAndConditions>
          I agree to {{clientName}} storing my details.
          <a href="#" target="_blank">View full terms & conditions</a>
        </mat-checkbox>

        <div *ngIf="termsAndConditions.checked" id="contactOptionsGroup">
          <p>Stay updated with news, features, and offers related to {{clientName}}.</p>
          <mat-checkbox>Phone</mat-checkbox>
          <mat-checkbox>Email</mat-checkbox>
        </div>