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": "harry.dresden@us.af.mil",
      "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引用单个配置文件。如果我只想要第一个bio，我应该使用profile [0] .bio。

Angular 2 - 使用HTTP请求进行插值和绑定

1 个答案: