javascript - Angular 6 : not set properties of class after calling HTTP-request

Question

我有带有选项卡的组件( ProfileComponent 是其他组件的父级)。我想使用 ProjekteingangComponent 中的服务 - Angular 色和项目 - 从服务器加载数据。

我为此函数编写了用于加载数据的函数( loadRoles() 和 loadProjects() )并在 ngOnInit() 上调用它，但问题是value未设置 this.roles和this.projects 。 Here和 here输出到浏览器中的控制台。

正如您在输出中看到的 value在loadRoles()和loadProjects()错误后写入。我该如何改进并设置 this.projects和this.roles在ngOnInit()正确吗？

projekteingang.component.ts:

import {Component, Input, OnInit} from '@angular/core';
import {ProfileComponent} from '../profile.component';
import {UserOfferMapping} from "../../../_models/UserOfferMapping";
import {UseroffermappingService} from "../../../_services/useroffermapping.service";
import {Userproject} from "../../../_models/Userproject";
import {Userrole} from "../../../_models/userrole";
import {UserprojectService} from "../../../_services/userproject.service";
import {UserroleService} from "../../../_services/userrole.service";
import {ProjectUtils} from "../../../utils/ProjectUtils";

@Component({
  selector: 'app-projekteingang',
  templateUrl: './projekteingang.component.html',
  styleUrls: ['./projekteingang.component.css']
})
export class ProjekteingangComponent implements OnInit {
  public userOfferMapping: any[];
  public  userId: number;
  public offerDataSource: any[] = [];
  public projects: Userproject[] = [];
  public roles: Userrole[] = [];
  constructor(
    private profileComponent: ProfileComponent,
    private useroffremappingService: UseroffermappingService,
    private userProjectService: UserprojectService,
    private userRoleService: UserroleService,) {
  }

  loadRoles() {
    this.userRoleService.getAllRoles().toPromise().then((value) => {
      console.log("value roles");
      console.log(value);
      this.roles = value;
    });
  }

  loadProjects(){
    this.userProjectService.getAllProjects().toPromise().then((value) => {
      console.log("value projects");
      console.log(value);
      this.projects = value;
    });
  }

  ngOnInit() {
    this.userId = this.profileComponent.currentUser.id;
    this.loadProjects();
    this.loadRoles();
    console.log("roles ngoinit");
    console.log(this.roles);
    console.log("projects ngoinit");
    console.log(this.projects);
    this.loadUserOfferMappings();
  }

  findProjectByID(id) {
    let project = null;
    this.projects.map(elem => {
      if (elem.id == id) {
        project = elem;
      }
    })
    return project;
  }

  findRoleByID(id) {
    let role = null;
    this.roles.map(elem => {
      if (elem.id == id) {
        role = elem;
      }
    })
    return role;
  }

  loadUserOfferMappings() {
    console.log("roles in func");
    console.log(this.roles);
    console.log("projects in func");
    console.log(this.projects);
    this.useroffremappingService.getAllUseroffermappingsByUserId(this.userId).subscribe(value => {
      console.log("Useroffermapping");
      console.log(value);
      this.userOfferMapping = value;
      value.map(elem => {
        console.log(elem);
        let project = this.findProjectByID(elem.projectId);
        let role = this.findRoleByID(elem.roleId);
        console.log(role);
        console.log(project);
        this.offerDataSource.push({
          projectId: elem.projectId,
          roleId: elem.roleId,
          projectName: project.name,
          roleName: role.name,
          roleTooltip: role.description
        });
      })
    });
  }

  get profile() {
    return this.profileComponent;
  }

}

profile.component.html:

  <mat-tab-group>
    <-- ... -->
    <-- another tabs -->
    <-- ... -->
    <mat-tab label="Projekt eingang">
      <app-projekteingang></app-projekteingang>
    </mat-tab>
</mat-tab-group>

Answer 1

我看到了多个被误解的事情:

1. 无需使用.toPromise()

使用 .subscribe(...) 代替:

loadProjects(){
    this.userProjectService.getAllProjects().subscribe((value) => {
      console.log("value projects");
      console.log(value);
      this.projects = value;
    });
  }

您正在获取异步数据

您必须等待它们才能使用它们。

您的关键代码需要全部 3 个调用的答案

因此，您必须将此代码提取到另一个方法，在每次数据接收时调用(检查您是否拥有所有数据)

loadRoles() {
  this.userRoleService.getAllRoles().subscribe((value) => {
    console.log("value roles");
    console.log(value);
    this.roles = value;
    this.feedOfferDataSource();
  });
}

loadProjects(){
  this.userProjectService.getAllProjects().subscribe((value) => {
    console.log("value projects");
    console.log(value);
    this.projects = value;
    this.feedOfferDataSource();
  });
}

loadUserOfferMappings() {

  console.log("roles in func");
  console.log(this.roles);
  console.log("projects in func");
  console.log(this.projects);
   this.useroffremappingService.getAllUseroffermappingsByUserId(this.userId).subscribe(value => {
    console.log("Useroffermapping");
    console.log(value);
    this.userOfferMapping = value;
    this.feedOfferDataSource();
  }
}

feedOfferDataSource() {
  if(!this.projects || !this.roles || !this.userOfferMapping) return;

  this.offerDataSource = this.userOfferMapping.map(elem => {
    console.log(elem);
    let project = this.findProjectByID(elem.projectId);
    let role = this.findRoleByID(elem.roleId);
    console.log(role);
    console.log(project);
    return {
      projectId: elem.projectId,
      roleId: elem.roleId,
      projectName: project.name,
      roleName: role.name,
      roleTooltip: role.description
    };
}

您使用了map，但没有使用它的值