角8界面+ Rest响应

Question

如何在组件html中显示(resultData、correlationId、errors)？

1. Rest Json答复：

{
"correlationId": null,
"errors": [],
"resultData": [
[
{
"ssrefitem": 710,
"subservice": "232-Telefone Móvel",
"srefitem": 386,
"formcode": "SCaetano",
"useqty": true,
"useprice": true,
"taxratetype": "O3",
"usesupplier": true,
"rfqforcesupplier": false,
"usetype": false,
"useunit": false
},
{
"ssrefitem": 711,
"subservice": "233-Internet",
"srefitem": 386,
"formcode": "SCaetano",
"useqty": true,
"useprice": true,
"taxratetype": "O3",
"usesupplier": true,
"rfqforcesupplier": false,
"usetype": false,
"useunit": false
}
]
],
"valid": true
}

1. 接口，用于Json响应( servi.ts)。我使用这个https://app.quicktype.io进行“转换”。

 export interface SubServices {
  correlationId: null;
  errors: any[];
  resultData: Array<ResultDDD[]>;
  valid: boolean;
}

export interface ResultDDD {
  ssrefitem: number;
  subservice: string;
  srefitem: number;
  formcode: string;
  useqty: boolean;
  useprice: boolean;
  taxratetype: string;
  usesupplier: boolean;
  rfqforcesupplier: boolean;
  usetype: boolean;
  useunit: boolean;
}

1. 我的服务(sot.service.ts)

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {SubServices} from './servi';


@Injectable({
  providedIn: 'root'
})
export class SotService {


  private sotUrl = 'cannot-give-the-real-one-but-the-response-is-in-the-1.';
  constructor(private http: HttpClient) { }

  getSubServices(): Observable<SubServices[]> {
    return this.http.get<SubServices[]>(this.sotUrl);
  }
}

1. 我的组件(servi.component.ts)

import { Component, OnInit } from '@angular/core';
import {SotService} from '../sot.service';
import { SubServices} from '../servi';


@Component({
  selector: 'app-sotlist',
  templateUrl: './sotlist.component.html',
  styleUrls: ['./sotlist.component.css']
})
export class SotlistComponent implements OnInit {

  todos: SubServices[];
  constructor( private sotService: SotService) {}

  ngOnInit() {
    this.getSubServices();
  }

   getSubServices() {
     this.sotService.getSubServices()
       .subscribe(
         (data: SubServices[]) =>  {
           this.todos = data;
           console.log(this.todos);
         }
       );
  }
}

如果我在component.html中使用这样的东西

<div>

  <h3>Something Something</h3>


  <ul class="items">
    <li *ngFor="let res of todos.resultData">
      {{res}}
    </li>
  </ul>
</div>

它会给我：

1.物体物体，物体物体

1. 控制台中的resultData在ngFor中的用法是："ERROR TypeError:无法读取未定义的属性'resultData‘“

Answer 1

在您的响应中，resultData是一个数组。因此，您需要将下面的代码放在html中。

<ul class="items">
    <li *ngFor="let res of todos.resultData[0]">
      {{res}}
    </li>
</ul>

如果只放置{{res}，它将在DOM中给出对象对象。如果您想显示整个对象，则需要给出类似于{res\ json }}的管道。

Answer 2

在您的服务中，将http调用更改为：

return this.http.get<SubServices>(this.sotUrl); 

然后在component.ts中将getSubServices()方法更改为：

   getSubServices() {
     this.sotService.getSubServices()
       .subscribe(
         (data: SubServices) =>  {
           this.todos = data;
           console.log(this.todos);
         }
       );
  }

你的模板：

<div>

  <h3>Something Something</h3>


  <ul class="items">
    <li *ngFor="let res of todos.resultData">
      {{res[0].subservice}}
    </li>
  </ul>
</div>

Answer 3

好的，我将组件更改为：

import { Component, OnInit } from '@angular/core';
import {SotService} from '../sot.service';
import {ResultDDD, SubServices} from '../servi';


@Component({
  selector: 'app-sotlist',
  templateUrl: './sotlist.component.html',
  styleUrls: ['./sotlist.component.css']
})
export class SotlistComponent implements OnInit {

  todos: SubServices;
  public resul: ResultDDD[];
  constructor( private sotService: SotService) {}

  ngOnInit() {
    this.getSubServices();
  }

   getSubServices() {
     this.sotService.getSubServices()
       .subscribe(
         (data: SubServices) =>  {
           this.todos = data;
           this.resul = this.todos.resultData[0];
           console.log(this.todos);
         }
       );
  }
}

现在在我使用的html中：

<div>

  <h3>Something Something</h3>


  <ul class="items">
    <li *ngFor="let res of resul">
      {{res.ssrefitem}}
    </li>
  </ul>
</div>

没有控制台错误，它显示正确(并且在html端自动完成).Thks和Parth Dhankecha。