难以从角度 12 的 api 显示 json 对象答案

【问题标题】：Difficulty to display json object from an api in angular 12难以从角度 12 的 api 显示 json 对象
【发布时间】：2021-10-04 08:03:35
【问题描述】：

对不起，我不会在条款上准确。

我正在实习，我必须显示 api 的 json 内容。我可以使用 console.log 并查看数据，但我无法在我的 html 中显示我必须显示的内容。

Where i want to go in the object。那是 where i go at most with the pipe keyvalue。

这是我的component.html：

<div style="text-align:center">
<h1>
  Welcome!
</h1>
<input type="text" class="form-control" [(ngModel)]="sujetRecherche">
    <button (click)="getData()" >Fetch Data</button>   
</div>

<div *ngFor="let these of thesesFromWebsite | keyvalue">
            {{these.key}}: {{these.value}}
</div>

这是我的 component.ts

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { TheseFromWebsite } from 'src/app/models/theseFromWebsite.model';
import { ListTheseFromWebsite } from 'src/app/models/listTheseFromWebsite.model';
import { pipe } from 'rxjs';
import { map } from 'rxjs/operators';


@Component({
  selector: 'app-recuperation-theses-site-officiel',
  templateUrl: './recuperation-theses-site-officiel.component.html',
  styleUrls: ['./recuperation-theses-site-officiel.component.css']
})
export class RecuperationThesesSiteOfficielComponent implements OnInit {
  
  thesesFromWebsite?:ListTheseFromWebsite[];
  sujetRecherche='';
  

  constructor(private http: HttpClient) {
   
}
  ngOnInit(): void {
  }

  getData(): void {
    const urlThesesSite= "http://www.theses.fr/?q="+this.sujetRecherche+"&fq=dateSoutenance:[1965-01-01T23:59:59Z%2BTO%2B2031-12-31T23:59:59Z]&checkedfacets=discipline=Informatique;&start=0&status=&access=&prevision=&filtrepersonne=&zone1=titreRAs&val1=&op1=AND&zone2=auteurs&val2=&op2=AND&zone3=etabSoutenances&val3=&op3=AND&zone4=dateSoutenance&val4a=&val4b=&type=&format=json"
    this.http.get</*any*/[]>(urlThesesSite)
    .subscribe(
      (data)=>{
        this.thesesFromWebsite = data;
        console.warn(typeof(this.thesesFromWebsite));
        console.log(this.thesesFromWebsite);   
        },    
    error => {
      console.log(error);
    });
    
  }

  
}

你能帮帮我吗？谢谢！

编辑：这里是询问的 json 数据的链接enter link description here

【问题讨论】：

您好，您可以将完整的 JSON 响应数据附加到问题中吗？谢谢。
@永顺你好！那是你要的吗？ theses.fr/fr/?q=lala&format=json
是的，您可以附上问题的链接。 JSON 响应可能有助于解决您的问题。
谢谢，我去看看 POCO 对象是什么，我会尝试使用它；）再次，非常感谢。
哦，我绝对不是 C# 开发人员。但我认为 angluar 是类似的东西，这是我必须做的模型吗？ @永顺

标签： json angular angular12

【解决方案1】：

试试这个：

<div *ngFor="let these of thesesFromWebsite | keyvalue">
            {{these.key}}: 
      <div *ngFor="let item of these.value | keyvalue">{{item.key}}: {{item.value}}</div>
</div>

【讨论】：

你好，谢谢，但它返回了这个错误：没有重载匹配这个调用。最后一个重载给出了以下错误。 'number | 类型的参数列出这些来自网站 | (() => 字符串) | (() => 字符串) | (() => ListTheseFromWebsite | 未定义) | ((...items: ListTheseFromWebsite[]) => number) | ... 26 更多... | (() => { ...; })' 不能分配给类型为'Record |只读地图<...> |空 |未定义'。
你能给我完整的 JSON 响应数据吗？
是的，我把它放在问题中，在这里编辑它是：thes.fr/fr/?q=lala&format=json

【解决方案2】：

使用这个：

<div *ngFor="let these of thesesFromWebsite | keyvalue">
            {{these.key}}:{{this.value | json}} 
<div>

【讨论】：