角6:调用HTTP-请求后未设置类的属性

Question

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

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

正如您在输出中看到的，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;
    });
  }

1. 您正在获取异步数据

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

1. 您的标准代码需要所有三个呼叫的应答。

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

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

1. 您使用的是map而不使用其值。

Answer 2

getAllRoles、getAllProjects和getAllUseroffermappingsByUserId是三个独立的异步调用。不能保证这三件事的完成顺序。

现在，函数loadUserOfferMappings实际上依赖于为角色和项目获取的数据。因此，这意味着只有在项目和角色已经被获取之后才应该调用getAllUseroffermappingsByUserId。

现在有多种方法来解决这个问题：

1. 最新的方法是在使用getAllUseroffermappingsByUserId中的角色和项目之前检查角色和项目是否可用；
2. 更明智的方法是，在角色和项目调用仅被解析后，实际调用loadUserOfferMappings方法。
3. 另一种方法可以是为您承诺调用保持加载状态。例如，异步调用处于加载、加载或错误状态。因此，只有在getAllUseroffermappingsByUserId和getProjects处于加载状态时才调用getRoles。