Angular Material陌生人渲染行为

Question

我正在使用最新版本的Angular和Angular Material。我的组件有问题。页面加载如下：Before de click当我点击菜单时，内容就会出现。 After clicking我已经尝试卸载并安装所有材料。这个问题还在继续。我有一个单独的模块来导入和导出所有材料组件。以下是使用材质标记的组件的代码：

profile.component.ts

import { Component, OnInit } from '@angular/core';

import {AuthService} from "../../services/auth.service";
import {User} from "../../model/model.user";
import {Router} from "@angular/router";
import { Expense } from '../../model/model.expense';
import { ReceiptService } from "../../services/receipt.service";
import { ExpenseService } from './../../services/expense.service';
import { Receipt } from './../../model/model.receipt';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

  totalReceita = 0;
  totalDespesa = 0;
  receipts = []
  expenses = []
  currentUser: User;
  constructor(public authService: AuthService, public router: Router, public receiptService: ReceiptService,  public expenseService: ExpenseService) {
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  }

  ngOnInit() {
    this.receiptService.getReceipts(this.currentUser.id).subscribe(
      data => {

        console.log(data)
        this.receipts = this.retiraArrayRec(data);
        this.somaTudoRec();
      }
      );
      this.expenseService.getExpenses(this.currentUser.id).subscribe(
        data => {
          this.expenses =this.retiraArrayDesp(data);
          this.somaTudoDes();
        }
        );
        console.log(this.receipts)
  }
  retiraArrayRec(data){
    let lista = []
    data.forEach(element => {
      let receita : Receipt = new Receipt;
      receita.name = element[0];
      receita.value = element[1]
      lista.push(receita);
    });
    return lista;
  }
  retiraArrayDesp(data){
    let lista = []
    data.forEach(element => {
      let despesa : Expense = new Expense;
      despesa.name = element[0];
      despesa.value = element[1]
      lista.push(despesa);
    });
    return lista;
  }

  somaTudoRec(){
    this.receipts.forEach(element => {
     this.totalReceita += element.value;
    });
  }
  somaTudoDes(){
    this.expenses.forEach(element => {
     this.totalDespesa += element.value;
    });
  }


// login out from the app
  logOut() {
    this.authService.logOut()
      .subscribe(
        data => {
          this.router.navigate(['/login']);
        },
        error => {

        });
  }

}

profile.component.html

    <mat-sidenav-container fullscreen class="menu-container">
  <mat-sidenav #sidenav>
    <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Receitas</h2>
                <mat-icon matListIcon>local_atm</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Despesas</h2>
                <mat-icon matListIcon>show_chart</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Notificações</h2>
                <mat-icon matListIcon>notification_important</mat-icon>
            </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content fxFlexFill>
        <mat-toolbar>
                <button class="hamburger mat-button" mat-icon-button (click)="sidenav.toggle()">
                  <mat-icon>menu</mat-icon>
                  <span>Menu</span>
                </button>

                <span>Bem vindo ao CPF, Pedro</span>

                <button mat-icon-button [mat-menu-trigger-for]="menu">
                  <mat-icon>more_vert</mat-icon>
                </button>
              </mat-toolbar>
              <mat-menu x-position="before" #menu="matMenu">
                <button mat-menu-item>
                  <mat-icon>person</mat-icon>
                  <span>Perfil</span>
                </button>
                <button mat-menu-item>
                  <mat-icon>money_off</mat-icon>
                  <span>Sair</span>
                </button>
              </mat-menu>
  </mat-sidenav-content>
</mat-sidenav-container>

profile.component.css

    mat-toolbar {
  background-image: linear-gradient(to bottom, #00b4db, #0083b0);
  color: #fff;
  justify-content: space-between;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
}

  span {
      font-size: 16px;
      font-weight: 700;
  }

  .hamburger {
      height: 100%;
      font-size: 18px;
  }


.mat-sidenav-container {
  min-width: 400px;
  max-width: 100%;
}

  .mat-sidenav {
      flex: 0 1 auto;
  }
  .menu-spacer {
      flex: 1;
  }

  .mat-list-item-content {
      padding: 0 25px;
  }


.menu-container {
  min-width: 200px;
  max-width: 100%;
}

Answer 1

首先，请考虑您需要在项目中插入样式：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

如果它没有解决问题，我想这是因为你正在使用另一种字体并且还添加了！对于字体很重要，请尝试在style.css（或style.scss）中添加以下代码，这是一般/公共影响整个项目的CSS文件：

mat-icon{
  font-family: 'Material Icons' !important;
}