每个复选框显示两次答案

【问题标题】：Each checkbox is showing up twice每个复选框显示两次
【发布时间】：2021-07-04 09:31:16
【问题描述】：

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

<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 图像：

【问题讨论】：

缺少一些 CSS。你是如何在你的项目中添加材料的。你跑ng add @angular/material了吗？
@StPaulis 我通过“npm install --save @angular/material”添加了材料。但是是否有必要添加 css 直到我不想更改任何样式？
建议大家关注官方文档：material.angular.io/guide/getting-started
@StPaulis 是的，问题解决了

标签： angular typescript angular-flex-layout

【解决方案1】：

似乎缺少一些 material 样式。

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

ng 添加@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

【讨论】：