Angular 8 - *ngIf和mat-checkbox无法工作

Question

Angular 8 - *ngIf和mat-checkbox无法工作

angularcheckboxangular-materialangular-ng-if

6

我遇到了一个Angular Material复选框的问题，本以为这是个相对简单的事情，但由于某些原因，我无法使其正常工作。

我有一个div，只想在mat-checkbox被选中时显示，但即使我在这里找到了一个示例可以使用*ngIf实现，它似乎也不想与之配合工作：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应该相对简单，但我似乎被卡住了。我可能会错过一些完全显而易见的东西，但我看不到它可能是什么。

项目后面还会有另一个此功能的实例，因此它们需要独立工作。

如果有人能提供帮助或建议，我将万分感激。

- RocketMatt

你可以在组件内定义数值，而不是在模板中定义。例如：

export class CheckboxOverviewExample {
  checked: boolean = true;
}

然后只需要从模板中删除你的ngInit即可。 - mocni_T

我猜我们只是假设有一个 TypeScript 文件，一切都设置正确了？另外，错误呢？ - Austin T French

我不明白，你是想要这样的东西吗？https://stackblitz.com/edit/angular-lhaikj?file=src/app/app.module.ts 这是一个在 Angular 8 中的快速示例。 - Crocsx

你在 ts 文件中定义了 checked 吗？如果没有，请将其定义为 false 并删除此行代码：[checked]="false"。 - Hamza

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MoxxiManagarm · Accepted Answer

您不需要在组件中定义变量。您也可以引用复选框。

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