angular - 每個勾選框都顯示兩次

我正在嘗試在 Angular 中使用 mat-checkbox。基本上是想設計支付方式的介面。因此，我使用 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>

我也正在添加我的使用者介面圖片：

答案＃1

看起來有一些 material 樣式缺失。

請從官方文件查看安裝指南：Angular Material | 入門指南

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

答案＃2

我遇到了類似的問題，當我試圖在現有項目中添加 Angular Material 時，style.css 文件沒有正確更新。

這是我做的：

• 前往專案的 style.css 檔案。

  新增：@import "~@angular/material/prebuilt-themes/indigo-pink.css"；//使用你選擇的預建主題名稱。

您可以在此處找到更多資訊：如何修復 Angular Material 元件的建置錯誤？

希望那有幫助。