如何访问API调用中的所有数据

Question

getNames(): Observable<bookmodel[]> {
  const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=xxxxxxxx';
  return this.http.get(endpoints).pipe(
        map(this.extractData));
 }

<h1 class="uk-flex uk-flex-center">Top Books{{bestsellers_date}}</h1>
<hr class="uk-divider-icon">
<div class="uk-child-width-1-5@s uk-grid-match" uk-grid>
    <div *ngFor="let name of names;  let i = index">
        <div class="uk-card uk-card-hover uk-card-body">
            <h3 class="uk-card-title">{{name.title}}</h3>
            <img style="height:250px;" src="{{name.book_image}}"><br/><br/>
            <span>Summary: {{name.description || ' NA' |characters:150}}</span><br />
            <hr class="uk-divider-icon">
            <span>Author {{name.author}}</span>
            <br/>
            <br/>Best Sellers Rank {{name.rank}}
            <br />
            <span>Weeks on List {{name.weeks_on_list}}</span>
            <div class="uk-card-footer">
                <span><a  class="uk-button uk-button-primary" href="{{name.amazon_product_url}}">Buy On Amazon</a></span>
            </div>
        </div>
    </div>
</div>

好的，上面的代码调用了api，并且api返回了一个带有嵌套数组的对象，以便获取我要放置的信息。我将数据定义为data.results.books，但是我想在数据中访问数据我已经尝试仅将.books部分取出来，但是NGFOR不能与对象一起工作，是否有一种方法可以存储甚至获取data.results中的数据，以及如何存储它

Answer 1

service.ts

getNames(): Observable<bookmodel[]> {
  const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';
  return this.http.get<bookmodel[]>(endpoints);
 }

component.ts

this.service.getNames().subscribe(names =>  this.names = names);

HTML

<div *ngFor="let name of names;  let i = index"> 
......
</div>

如果您不订阅，请使用html中的async管道

<div *ngFor="let name of names | async;  let i = index"> 
    ......
</div>

Answer 2

尝试使用异步管道更新java.util.Date。您需要使用*ngFor管道，因为httpClient总是返回Observable。

async

还更新<div *ngFor="let name of names | async; let i = index"></div>并从那里删除getNames

.pipe