什么是摆脱这些错误在我的html代码中的最佳实践方法

Question

好的，所以我知道它是一个非常通用的标题，但是我正在访问纽约时报api，并且其中嵌套了对象，例如，一个对象是结果，而内部结果是我的打字稿中的书，我正在使用for循环访问嵌套数组，但是我在html中遇到错误

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { BooksService } from './books.service';
import { Listmodel } from '../models/list';

import {LocalStorageService} from 'ngx-localstorage';


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

  constructor(private api: BooksService,
              private http: HttpClient,
              private localStorage: LocalStorageService) { }
  book;
  names: Listmodel[];
  section: string;
  fav: string;
  favourites = [];
  modal: any;
  modal1 = [];
  fave: any;
  clientid: number;
  user;
  ngOnInit() {
    this.loadBooks();
    this.loadNames();
  }
  loadBooks() {
    this.api.getBooks().subscribe(
    data => {
         this.book = data.results;
     }
  );
 }
 loadNames() {
   this.api.getNames().subscribe(
     data => {
       return this.names = data.results;
     }
   );
 }
 sectionlink(text: any) {
    this.section = text;
    this.api.getcategory(text).subscribe(
    data => {
        return this.book = data.results;
     }
  );
  }
  addFav(text: any) {
      this.fav = text;
      this.user = JSON.parse(localStorage.getItem('user'));
      this.clientid = this.user.data.id;
      this.api.addfav(this.fav, this.clientid).subscribe(
        data => {
          this.fave = data;
        }
      );
  }
  readMore(text: string) {
    this.modal = text;
    Object.keys(this.modal).map((keyName) => {
      return {id: keyName, product: this.modal[keyName]};
  });
 }
}

<h1 class="uk-flex uk-flex-center uk-width-1-1">{{book.list_name}}</h1>
<hr class="uk-divider-icon uk-width-1-1">
<div class="uk-grid uk-grid-divider textali">
  <div class="uk-width-1-3">List Updated {{book.updated | lowercase }}
  </div>
  <div class="uk-width-1-3">
    <a href="#offcanvas-usage" class="uk-button uk-button-primary btn1" uk-toggle>Categorys</a>
  </div>
  <div class="uk-width-1-3">List Published On {{book.published_date | lowercase |date: 'fullDate'}}
  </div>
</div>
<div class="uk-grid uk-grid-medium" style="padding:15px;">
  <div class="uk-child-width-1-5@s uk-grid-match" uk-grid>
    <div *ngFor="let name of book.books; let i = index">
      <div class="uk-card uk-card-hover uk-card-body">
        <img src="{{name.book_image}}">
        <hr class="uk-divider-icon">
        Best Sellers Rank {{name.rank}}
        <br />
        <span>Weeks on List {{name.weeks_on_list}}</span>
        <br/>
        <br/>
        <div class="uk-card-footer" style="padding: 2px">
          <a href="{{name.amazon_product_url}}" class=" button uk-icon-link uk-margin-small-right"
            uk-icon="icon: cart; ratio: 1.5"></a>
          <a class="uk-icon-link uk-margin-small-right"
              (click)="addFav({title: name.title, image:name.book_image, amazon:name.amazon_product_url})"
              uk-icon="icon: heart; ratio: 1.5"></a>
          <a (click)="readMore({ Summary: name.description, Author: name.author })"
            uk-toggle="target: #read-more" class="uk-icon-link uk-margin-small-right"
            uk-icon="icon: info; ratio: 1.5"></a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="offcanvas-usage" uk-offcanvas>
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" (click)="this.isButtonVisible = true" type="button" uk-close></button>
    <h3>Categorys</h3>
    <div *ngFor="let section of names">
      <div class=" uk-flex uk-flex-column">
        <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
          <li class="uk-active"><a (click)="sectionlink(section.list_name)">{{section.list_name}}</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="read-more" uk-modal>
  <div class="uk-modal-dialog uk-modal-body">
      <h2 class="uk-modal-title uk-heading">Book Info </h2>
      <div class="uk-divider-icon"></div>
      <div *ngFor="let item of modal | keyvalue">
        <br/>
      <h6 class="uk-heading">{{item.key}}</h6>
      <span>{{item.value}}</span>
    </div>
    <div class="uk-divider-icon"></div>
    <button class="uk-modal-close uk-button uk-button-danger" type="button">Close</button>
  </div>
</div>

从类型脚本中可以看到，我已将数据绑定到this.books，这是我收到的html错误

有人知道我必须在哪里定义该循环吗？我只是想摆脱错误，谢谢您的帮助

Answer 1

该错误很可能是由于您从api检索数据之前初始页面加载所致。有几种方法可以解决此问题，但是Angular内置的方法是通过?运算符，如下所示。

<div *ngFor="let name of book?.books; let i = index">