Question

我试图制作一个带有菜单的侧面导航栏，其中包含部分和子部分。问题是mat-list看起来像大透明矩形，并检查告诉列表是否正确呈现。任何帮助表示赞赏。

<div fxLayout="column" >
        <div fxLayout="row" fxFlex="100%" >
              <app-header fxFlex="100%"> </app-header>
        </div>
        <mat-sidenav-container >
            <mat-sidenav #sidenav mode="side" opened="true" 
                         [fixedInViewport]="false" [fixedTopGap]="0"
                         [fixedBottomGap]="0">
                                <mat-list >
                                    <div *ngFor = "let section of defaultSections">
                                        <mat-list-item>{{section.name}}</mat-list-item>
                                            <mat-list>
                                                <div *ngFor="let subSection of section?.subSections">
                                                    <mat-list-item>
                                                        <!-- <mat-icon>{{subSection.icon}}</mat-icon> -->
                                                        <h4 mat-line>{{subSection.name}}</h4> 
                                                    </mat-list-item> 
                                                </div>
                                            </mat-list> 
                                    </div>
                                 </mat-list>
            </mat-sidenav>

            <mat-sidenav-content >

            </mat-sidenav-content>
        </mat-sidenav-container>
    </div>



<router-outlet></router-outlet>

更新 app.cpmponenet.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';

  defaultSections = [
        {id:1, name: 'Entries and Accounts', subSections: [
            {id:1, name: 'Journal Entries' , icon: 'book'},
            {id:2, name: 'charts of Accounts', icon: 'account_balance'},
        ]},
        {id:2, name: 'Financial Reports', subSections: [
            {id:1, name: 'General Ledure', icon: 'library_books'},
            {id:2, name: 'Income Statement', icon: 'event_notes'},
            {id:3, name: 'Balance Sheet', icon: 'event_notes'},
            {id:4, name: 'Cash Flow', icon: 'attach_money'}
        ]},
        {id:3, name: 'Bulletins and Currencies', subSections: [
            {id:1, name: 'Exchange Rate Bulletins', icon: 'format_list_bulleted'},
            {id:2, name: 'Currencies', icon: 'monetization_on'},
        ]}

        ];

}

Answer 1

你的代码似乎对我有用，我很快就复制了一个类似的例子here，我可以看到我的sidenav中的列表。在我的例子中，你有什么不同的东西我没有考虑过吗？

Answer 2

注意到，Angular Material 主题紫色-绿色（以及其他）将 mat-list-item 颜色设置为白色。在白色背景的页面上使用时，文本被隐藏。注意，页面有内容

@angular/material/prebuilt-themes/purple-green.css

Answer 3

我有一个类似的问题。该代码按预期生成了该列表，但是文本颜色为白色（与背景相同）。尝试设置背景或更改字体颜色。

mat-list不会出现在mat-sidenav中

3 个答案: