Пользовательский компонент неправильно загружен внутри вкладки (угловой материал) - PullRequest
Новая
       39

Пользовательский компонент неправильно загружен внутри вкладки (угловой материал)

0 голосов
/ 09 мая 2019

Прежде всего, я новичок в Angular, я понял, что понял, как это работает в глобальном масштабе, но я столкнулся с моей первой большой проблемой.

У меня есть пользовательская группа вкладок mat (использующая Angular Material v7, Angular 7), куда я хочу добавить пользовательские компоненты. В этих пользовательских компонентах я сделаю несколько вызовов API и пользовательский HTML для его отображения.

Я просматривал несколько форумов, но не нашел ответов (один из них, возможно, использует navbar вместо mat-tab-group с маршрутизацией), но мне бы очень хотелось сначала узнать, почему он не работает. Я реализовал некоторые пользовательские компоненты (html отображается нормально, вызовы API - все нормально), но когда я пытаюсь манипулировать html активной вкладки, возникает исключение NullReferenceException.

Итак, во-первых, вот HTML-код с mat-tab-group: 

<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>

Вот код ts моего компонента «myprofil», вы должны знать, что 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 дня), я все еще пытаюсь выяснить некоторые вещи. Если у кого-то есть время ответить или просто посмотреть, я был бы признателен.

Хорошего дня!

Лио

...