每个复选框出现两次

Question

我正在尝试 Angular 中的 mat-checkbox。基本上是在尝试设计支付方式UI。因此，我使用 mat-checkbox select 一种付款方式。但是每个盒子都出现了两次。我在这里添加我的代码：

<div fxLayout="column" fxLayoutGap="1rem">
          <p>Select Payment Method</p>
          <mat-checkbox>Cash On Delivery</mat-checkbox>
          <mat-checkbox>Online Payment</mat-checkbox>
          <mat-checkbox>Wallet</mat-checkbox>
        </div>

我还添加了我的 UI:

的图像

Answer 1

似乎缺少某些 material 样式。

查看官方文档中的安装指南：Angular Material | Getting Started

ng add @angular/material

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

    Choose a prebuilt theme name, or "custom" for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

    Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

    Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

The ng add command will additionally perform the following configurations:

    Add project dependencies to package.json
    Add the Roboto font to your index.html
    Add the Material Design icon font to your index.html
    Add a few global CSS styles to:
        Remove margins from body
        Set height: 100% on html and body
        Set Roboto as the default application font

Answer 2

我运行遇到了类似的问题，当我试图在现有项目中添加 angular material 并且 style.css 文件没有正确更新时。

这是我所做的：

转到项目的文件 style.css。

添加：@import "~@angular/material/prebuilt-themes/indigo-pink.css"; //使用您选择的预建主题名称。

您可以在此处找到更多信息：

希望对您有所帮助。

每个复选框出现两次

Each checkbox is showing up twice

angular

typescript

angular-flex-layout