Question

首先，我是Angular的新手，我想了解它在全球范围内的运作方式，但是我面临着我的第一个大问题。

我有一个自定义的mat-tab-group（使用Angular Material v7，Angular 7），我想在其中注入自定义组件。在这些自定义组件中，我将进行一些API调用和自定义html来显示它。

我一直在寻找几个论坛，但没有找到任何答案（其中一个也许是使用navbar而不是使用带路由的mat-tab-group），但我真的很想先知道为什么它不起作用。我已经实现了一些自定义组件（html可以正常显示，API调用可以正常运行），但是当我尝试操作活动选项卡的html时，会发生NullReferenceException。

所以首先，这是带有mat-tab-group的html：

<mat-tab-group id="tabGroupNav" animationDuration="1000ms" mat-stretch-tabs="always" dynamicHeight>
<mat-tab class="tabHome_nav">
<ng-template mat-tab-label>
  <mat-icon class="icon_Nav">home</mat-icon>
  NearyFeed
 </ng-template>
<app-events-feed></app-events-feed>
</mat-tab>

<mat-tab class="tabHome_nav">
 <ng-template mat-tab-label>
   <mat-icon class="icon_Nav">person_outline</mat-icon>
     My Profil
  </ng-template>
  <app-my-profil></app-my-profil>
  </mat-tab>
 </mat-tab-group>

这是我的组件“ myprofil”的ts代码，您应该知道该组件的html正确显示：

export class MyProfilComponent implements OnInit {
public imageResult: any;
img: HTMLImageElement;
username:string;

private userProfil: UserRegister ;
constructor(private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService,
private repo: RepositoryService,
private alertService: AlertService) { }

ngOnInit() {
 this.img = document.getElementById('imageProfil') as HTMLImageElement;
this.loadImageProfil();
this.loadProfil();
 }
//Load the user Image, if not found, assign empty Avatar to the image
loadImageProfil(): void {
this.repo.getData('api/Image')
  .subscribe(res => {
    this.imageResult = res;
    this.img.src = 'data:image/png;base64,' + this.imageResult;
  },
    error => {
      this.img.src = "../../../assets/avatar.png";
    });
 }
//Load the profil of the user and assign the values to the form
 loadProfil(): void {
  this.repo.getData('api/Profil')
   .subscribe((res :UserRegister) => {
     this.userProfil=res;
    this.username=this.userProfil.username;
    console.log(this.userProfil.username);
  },
    error => {
      this.alertService.error(error);
    });
  }

最后一段代码是麻烦所在。初始化图像源的行和影响用户名的行都在引起麻烦。它们没有初始化，并抛出NUllReferenceException。我猜html不是“活动的”，但是由于我对Angular非常陌生（仅2天），因此我仍在设法弄清楚一些事情。如果有人有时间回答或只是看一下，我将不胜感激。

祝你有美好的一天！

Lio

自定义组件未正确加载到mat-tab（角材料）中

0 个答案: