Question

我必须用角度4制作一个项目。

我有一个Web应用程序，它返回一个像这样的json文件：

{
  "Microsoft ": {
     "name1": [
        "link1",
        "link2",
        "link3"
    ],
     "name2": [
        "link1",
        "link2"
    ],
     "name3": [],
     "name4": [],
     "name5": [
        "link1"
    ]
  }
}

我想用angular显示这个文件，但我有2个问题，

我不知道如何用angular操纵json，我不知道为什么MicrosoftResult是空的？

这是我的组成部分：

import { Component, OnInit } from '@angular/core';
import {MicrosoftService} from './microsoft.service';
import {MicrosoftResult} from './microsoft-result';
import {Observable} from 'rxjs/Observable';
import {Photos} from './photos';

@Component({
  selector: 'app-microsoft',
  templateUrl: './microsoft.component.html',
  styleUrls: ['./microsoft.component.css']
})
export class MicrosoftComponent {

  constructor(private microsoftService: MicrosoftService) {
  }

  microsoftResult: MicrosoftResult;

  getJson(): void {
    this.microsoftService.getJson()
      .subscribe(
    data => this.microsoftResult = data,
        error => console.log('Error :: ' + error)
      );
  }
}

我的服务：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { MicrosoftResult } from './microsoft-result';
import {catchError} from 'rxjs/operators';
import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';
import 'rxjs/add/operator/map';

@Injectable()
export class MicrosoftService {

  apiUrl = 'http://localhost:8080/test/';

  constructor(private http: HttpClient) { }

  getJson(): Observable<any> {
    return this.http
      .get(this.apiUrl)
      .map((res: any) => res.json());

  }
}

这是微软的结果界面：

export interface MicrosoftResult {
Microsoft: JSON;
}

然后这是html网站：

<label>Utilisation d'un get : </label>
<button (click)="getJson()">Get</button>
<p>{{microsoftResult.Microsoft}}</p>

但问题是当我在浏览器上打开页面时，当我打开网站并点击按钮时，控制台上出现错误：

ERROR TypeError: Cannot read property 'Microsoft' of undefined
    at Object.eval [as updateRenderer] (MicrosoftComponent.html:14)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14693)
    at checkAndUpdateView (core.js:13807)
    at callViewAction (core.js:14153)
    at execComponentViewsAction (core.js:14085)
    at checkAndUpdateView (core.js:13808)
    at callViewAction (core.js:14153)
    at execComponentViewsAction (core.js:14085)
    at checkAndUpdateView (core.js:13808)
    at callWithDebugContext (core.js:15056)

Answer 1

Try using the ?. (safe navigation operator) on the microsoftResult object in the template.

<p>{{microsoftResult?.Microsoft}}</p>

Answer 2

我建议您转换为对特定对象的响应并检查代码中的 response.json（）。data ，就像角度教程v4的这一部分一样： https://v4.angular.io/tutorial/toh-pt6

private heroesUrl = 'api/heroes';  // URL to web api

constructor(private http: Http) { }

getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
             .toPromise()
             .then(response => response.json().data as Hero[])
             .catch(this.handleError);
}

private handleError(error: any): Promise<any> {
  console.error('An error occurred', error); // for demo purposes only
  return Promise.reject(error.message || error);
}

Answer 3

您的代码需要进行一些改进，例如： -

1）您编写的预期JSON有"Microsoft "而非"Microsoft"，但我认为这可能是您身边的错字。

2）ERROR TypeError: Cannot read property 'Microsoft' of undefined。抛出此错误是因为在呈现HTML时，microsoftResult的值实际上是未定义的，因为您尚未使用默认值对其进行初始化。

3）在你的函数中，分配Microsoft属性（如果存在），即

getJson(): void {
    this.microsoftService.getJson().subscribe(
        data => {
            if(data.Microsoft){
                 this.microsoftResult.Microsoft = data.Microsoft;
            } else { 
                 // Something else
            }
        },
        error => console.log('Error :: ' + error)
     );
  }

从localhost springboot获取json angular 4

3 个答案: