角材料垫 sidenav 使任何东西消失

Question

我用材料做了一个侧边导航栏，现在我只能看到导航栏 其他的都消失了！！！ 添加了 ng add @angular-material 并将所有导入添加到 app.module.ts - 并将应用组件导入到模块 ts 侧面导航工作正常，但页面的所有主体都消失了！！！ 不知道为什么...

我检查了 Brossser 工具，物品在那里 - 参见图 3，但我看不到它们，参见图 2 和图 1 找不到问题-感谢所有帮助者:) 查看详情

[

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AlbumHub';
  opend = false;
  }

#logo {
  float: right;
}

#hamburger{
  width: 75px;
  height: 75px;
}
#user{
  width: 75px;
  height: 50px;
}

/* header{
  border-bottom-style: solid;
} */

footer {
  position:absolute;
  bottom: 0;
  width:99%;
  height:60px;
  font-size: xx-large;
  border-top-style: solid ;
}
/* 
header #Ha{
  visibility: hidden;
  height: 0px;
}
header #Hb{
  visibility: hidden;
  height: 0px;
}
header #Hc{
  visibility: hidden;
  height: 0px;
}
header #Hd{
  visibility: hidden;
  height: 0px;
}
header #He{
  visibility: hidden;
  height: 0px;
} */

footer #Ua{
  visibility: hidden;
  height: 0px;
}
footer #Ub{
  visibility: hidden;
  height: 0px;
}
footer #Uc{
  visibility: hidden;
  height: 0px;
}
footer #Ud{
  visibility: hidden;
  height: 0px;
}
footer #Ue{
  visibility: hidden;
  height: 0px;
}
/* ----------------------------------------------------------- */
.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.example-radio-group {
  display: block;
  border: 1px solid #555;
  margin: 20px;
  padding: 10px;
}
mat-sidenav {
  width: 200px;
}
.header{
    width: 100%;
    height: 80px;
    display: block;
    background-color: #101010;
}

 <img id='logo'  src='/assets/images/logo.jpg'>
  <mat-sidenav-container class="example-container">
    
    <mat-sidenav #sidenav mode="over" [(opened)]="opend">
      <div><button id="Ha">Theme - Light / Dark</button></div>
      <br>
      <button id="Hb">Enter / Exit - Privet mode</button>
      <br>
      <br>
      <button id="Hc">Edit categories</button>
      <br>
      <br>
      <button id="Hd">About</button>
      <br>
      <br>
      <button id="He">Exit Web</button>
    </mat-sidenav>
    <!-- <mat-sidenav-content class="header"> -->
      <mat-sidenav-content >
      <a (click)="sidenav.toggle()"><img id="hamburger" src="/assets/images/menu.png"></a>
    </mat-sidenav-content>
  </mat-sidenav-container>
<!-- </header> -->


<!-- <app-welcome></app-welcome> -->
<app-upload></app-upload>
<!-- <app-image></app-image> -->

<footer>
  <a (click)="OpenUser()">
    <img id="user" src="/assets/images/user.png">
  </a>
  <button id="Ua">Show images on list / table</button>
  <button id="Ub">Start Random slideshow</button>
  <button id="Uc">Swich mode to import / observe images</button>
  <button id="Ud" [disabled]="isDisabled">Share images</button>
  <button id="Ue" [disabled]="isDisabled">Sync with Cloud storage</button>
</footer>