為什么我的物件一直顯示為物件物件？

需要一些幫助，我正在從 API 檢索資料，但是當我嘗試在我的 component.html 上顯示資料時，它顯示為物件物件。

當它給我錯誤時，我可以在控制臺中正確地看到資料：錯誤：找不到“字串”型別的不同支持物件。ngfor 僅支持系結到可迭代物件，例如陣列。

服務.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin, map, tap } from 'rxjs';
import { mergeMap } from 'rxjs';
import { Story } from './data';

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

  data: Story[] = [];

  constructor(private http: HttpClient) { }


  // Get Best Stories ////////////////////////////////////////////////////////////////////////////////
  getBestStories() {
    return this.listBestStories().pipe(
      mergeMap((ids) => forkJoin(ids.map((id: any) => this.getStory(id)))),
      map((response: any) => response as Story ),
      tap((data: Story) => console.log('Details: Best Stories'))
    );
  }
  getStory(id: any) {
    return this.http.get(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`);
  }
  
  listBestStories(): Observable<any> {
    return this.http.get('https://hacker-news.firebaseio.com/v0/beststories.json?print=pretty', {
      params: {
        orderBy: '"$key"',
        limitToFirst: '30',
      }
    });
  }

app.component.ts：

import { Component } from '@angular/core';
import { HackerNewsService } from './hacker-news.service';
import { Story } from './data';
import { Subscription } from 'rxjs';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test';


  stories: any[] | undefined

  subscriptions: Subscription[] = [];
  // data: Story | undefined;

  data: Story = {
    id: '', 
    deleted: '', 
    type: '',
    by: '',
    time: '',
    text: '',
    dead: '',
    parent: '',
    poll: '',
    kids: '',
    url: '',
    score: '',
    title: '',
    parts: '',
    descendants: ''
  };

  constructor(private hnService: HackerNewsService) {}

  getStories() {
    const start = performance.now();
    this.subscriptions.push(
      this.hnService.getBestStories()
        .subscribe((details: Story) => {this.data = details})
    )
  }
}

app.component.html：

<button (click)="getStories()">Get Best Stories</button>

<div *ngFor="let item of data | keyvalue">
  <ul>
    <li>{{item.key}} {{item.value}}</li>
  </ul>
</div>

uj5u.com熱心網友回復：

你有幾個問題

1. details 是一個陣列，data 是一個物件：

this.hnService.getBestStories()
        .subscribe((details: Story) => {this.data = details})

2. 此詳細資訊陣列的專案具有以下形狀：

{
  by: "georgecmu"
  descendants: 374
  id: 30108998
  kids: Array[33]
  score: 1084
  time: 1643328979
  title: "I won the local election, but my township ignored the results and state law"
  type: "story"
  url: "https://twitter.com/gaughen/status/1486834885964832770"
 }

所以它沒有“鍵”和“值”屬性

并且您的模板正在嘗試獲取此無效屬性：

<li>{{item.key}} {{item.value}}</li>

所以修復是：

1. “資料”變數的型別應該是“故事”的陣列

data: Story[] = [{
    id: '', 
    deleted: '', 
    type: '',
    by: '',
    time: '',
    text: '',
    dead: '',
    parent: '',
    poll: '',
    kids: '',
    url: '',
    score: '',
    title: '',
    parts: '',
    descendants: ''
  }];

2. 應更改模板以使用data專案中存在的屬性

<li>{{item.id}} {{item.title}}</li>

這是您問題的作業版本。

uj5u.com熱心網友回復：

使用 keyvalue 管道，確保您已在組件中匯入它：

import {KeyValue} from '@angular/common':

標籤：

上一篇：阿里云DataWorks介紹

下一篇：Pytorch模型訓練&保存/加載（搭建完整流程）