Question

我创建了一个Angular视图来显示从api获取的一些数据。数据存储在一个数组中。但是，该页面是空白的。 html页面没有显示任何内容。

TS：

/*
*  Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
*  See LICENSE in the source repository root for complete license information.
*/

import {Component, OnInit, OnDestroy} from '@angular/core';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import {AuthService} from '../services/auth.service';
import {AssignmentService} from '../services/AssignmentService';
import {Assignment} from '../models/Assignment';
import {MeService} from '../services/me.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  providers: [AssignmentService]
})
export class HomeComponent implements OnInit {
  me: MicrosoftGraph.User;
  assignments: Assignment[];
  ready: boolean;

  constructor(private meService: MeService,
              private authService: AuthService,
              private service: AssignmentService) {
  }

  ngOnInit() {
    this.meService.getMe().subscribe(me => {
        this.me = me;
      },
      err => {
        console.log(err);
      },
      () => {
        this.setAssignments();
      });
  }

  onLogout() {
    this.authService.logout();
  }



onLogin() {
    this.authService.login();
  }

  private setAssignments() {
    this.service.getOpenAssignments(this.me.mail).subscribe(assignments => {
        this.assignments = assignments;
        this.ready = true;
      },
      err => {
        console.log(err);
      },
      () => {
        console.log(this.assignments);
      });
  }
}

这是我的HTML：

<div *ngIf="ready">
  <div *ngFor="let assignment of assignments" class="container">
    <div class="row mt-5 justify-content-center">
      <div class="col-8">
        <h2 class="display-4 d-inline"> {{assignment.name}} </h2>
        <p class="lead d-inline"> {{assignment.created | date:'yyyy-MM-dd'}} </p>
        <span class="badge badge-secondary"> {{assignment.domain}} </span>
        <button type="button" class="btn btn-success float-right" [routerLink]="['/assignment/', assignment.name]">
          Meer
        </button>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-8">
        <hr class="my-4"/>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-8">
        <div *ngIf="assignment.description.length < 100">
          <p class="lead">
            {{ assignment.description }}
          </p>
        </div>
        <div *ngIf="assignment.description.length > 100">
          <p class="lead">
            {{ assignment.description.substr(0,100) + '...' }}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

数据已加载。分配和我填写并存储正确的数据......

有人有个主意吗？

提前致谢！

编辑：JSON响应为“OK”。它返回数据。 Ready没有在其他地方设置，也没有在控制台中出错。如果我删除了ngIf指令，它只是一个空白页面。与ngIf指令相同。我认为这意味着在呈现页面时分配是空的还是未定义的？

edit_2：这是我的服务

import {Injectable, OnInit} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class AssignmentService implements OnInit {

  BASE_API_URL = 'http://10.50.70.21:3000';

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
  }

  getOpenAssignments(user: string) {
    return this.http.get(this.BASE_API_URL + '/assignments/open/' + user).catch(this.onError);
  }

  getAssignment(name: string) {
    return this.http.get(this.BASE_API_URL + '/assignments/' + name).catch(this.onError);
  }

  onError(res: Response): Observable<any> {
    const error = 'Error ${res.status}: ${res.statusText}';
    return Observable.throw(error);
  }

}

Answer 1

你应该尝试使用.json（）

 private setAssignments() {
    this.service.getOpenAssignments(this.me.mail).subscribe(assignments => {
        this.assignments = assignments.json();
        this.ready = true;
      },

Answer 2

您正在使用observables。当数据尚未提取到您的应用程序时，模板已经呈现，因此它显示一个空白页面。将您的observable存储在变量中，并使用异步管道将它们显示在模板中，如下所示：

<强> .TS

    @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  providers: [AssignmentService]
})
export class HomeComponent implements OnInit {
  me: Observable<any>;
  assignments: Observable<Assignment[]>;
  meSubscription: Subscription;

  constructor(private meService: MeService,
              private authService: AuthService,
              private service: AssignmentService) {
  }

  ngOnInit() {
    this.me = this.meService.getMe();
    this.assignements = this.setAssignements(this.me);
  }

  onLogout() {
    this.authService.logout();
  }

onLogin() {
    this.authService.login();
  }

  private setAssignments(user$) {
   return user$.mergeMap(user => {
       return this.service.getOpenAssignments(user.mail);
   });
  }
}

<强>模板

这里我只是将异步（第一行）放在等待数据

<div *ngIf="(assignements | async) as assignementsArray">
  <div *ngFor="let assignment of assignementsArray" class="container">
    <div class="row mt-5 justify-content-center">
      <div class="col-8">
        <h2 class="display-4 d-inline"> {{assignment.name}} </h2>
        <p class="lead d-inline"> {{assignment.created | date:'yyyy-MM-dd'}} </p>
        <span class="badge badge-secondary"> {{assignment.domain}} </span>
        <button type="button" class="btn btn-success float-right" [routerLink]="['/assignment/', assignment.name]">
          Meer
        </button>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-8">
        <hr class="my-4"/>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-8">
        <div *ngIf="assignment.description.length < 100">
          <p class="lead">
            {{ assignment.description }}
          </p>
        </div>
        <div *ngIf="assignment.description.length > 100">
          <p class="lead">
            {{ assignment.description.substr(0,100) + '...' }}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

角度视图不会加载数据

2 个答案: