角2-插值和与HTTP请求结合

Question

我是Angular2的新手，并且在我的视图中显示数据很难。

import { Component, AfterViewInit, OnInit, EventEmitter, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { MdSnackBar } from '@angular/material';
import { TdLoadingService, TdDialogService, TdMediaService } from '@covalent/core';
//import { ProfileService } from './services/profile.service';
import { ProfileStudent } from "../core/entities/user";
import { GlobalService } from "../core/services/global.service";
import { UserDataContext } from "../core/services/data/user-data-context.service";
@Component({
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
  profile: ProfileStudent = <ProfileStudent>{};

  constructor(private titleService: Title,
    private router: Router,
    private loadingService: TdLoadingService,
    private dialogService: TdDialogService,
    private snackBarService: MdSnackBar,
    private global: GlobalService,
    private userDataContext: UserDataContext,
    public media: TdMediaService) { }
  goBack(route: string): void {
    this.router.navigate(['/']);
  }
  ngOnInit(): void {
    // broadcast to all listener observables when loading the page
    this.media.broadcast();
    this.titleService.setTitle('Profile');
    this.loadingService.register('profileIsLoaded');
    this.loadProfile();
  }
  loadProfile(): void {
    this.userDataContext.getProfile()
        .then((profile) => {
          this.profile = profile
          this.loadingService.resolve('profileIsLoaded');
        })
        .catch(e => {
          this.loadingService.resolve('profileIsLoaded');
          console.log('error getting user profile');
          console.log(e);
        });
  }

}

我正在从服务器中获取数据，但是一旦承诺解决，视图就不会显示数据。

在视图中我有

<md-list-item>
   <md-icon md-list-avatar>account_box</md-icon>
    <h4 md-line>{{profile?.bio}}</h4>
    <p md-line>Name</p>
</md-list-item>

最后，实际获取数据的数据文本。

getProfile(): Promise<ProfileStudent> {
        const self = this;
        //add flag for when the profile is loaded

        let query = EntityQuery.from(this.userApiResources.profile.resource);
        return <Promise<any>>this.manager.executeQuery(query)
            .then(res => getUserProfileResponse(res))
            .catch(this.queryFailed);
        function getUserProfileResponse(userProfileResult: QueryResult) {
            const userProfiles = userProfileResult.results as Array<ProfileStudent>
            return userProfiles;
        }
    }

服务器的JSON

[
  {
    "$type": "Ecat.Data.Models.User.ProfileStudent, Ecat.Data",
    "PersonId": 1,
    "Bio": "Hello this is a test",
    "ContactNumber": null,
    "Person": {
      "$type": "Models.User.Person, Data",
      "PersonId": 1,
      "IsActive": true,
      "LastName": "Dresden",
      "FirstName": "Harry",
      "AvatarLocation": null,
      "GoByName": "Harry",
      "MpGender": "Male",
      "Email": "[e-mail]",
      "RegistrationComplete": true,
      "MpInstituteRole": "test",
      "Security": null,
      "ModifiedById": null,
      "ModifiedDate": null
    },
    "Courses": null,
    "CourseGroupMemberships": null
  }
]

Answer 1

我弄清楚了........

const userProfiles = userProfileResult.results as Array<ProfileStudent>

我试图用profile.bio引用单个配置文件。如果我只想要第一个生物。