Html 如何以角度遍历对象数组

我有一排书架，上面有一本书

book.ts类

export class Book{
bookId:number;
bookName:string;
cost:number;
quantity:number;
constructor(bookId, bookType, cost, quantity){
    this.cost=cost;
    this.bookId=bookId;
    this.bookName=bookName;
    this.quantity=quantity;
}}

books-list.component.ts中的书架

   booksArr: book[] = [
    new book(100, "The Alchemist", 20, 1),
    new book(101, "Rich Dad Poor Dad", 50, 2),
    new book(102, "Charolett's Web", 10, 1),
    new book(103, "Harry Potter", 70, 4),
    new book(104, "Gone Girl", 150, 3),
];

我想用html创建一个表来显示这些书的详细信息。 图书列表.component.html

<table border="1" *ngIf="bName">
    <thead>
      <tr>
        <th>book ID</th>
        <th>book Name</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let b of booksArr">
        <td *ngIf="b.//WHAT SHOULD I PUT HERE"</td>
      </tr>
    </tbody>
  </table>

书号
书名
尝试：

{{b.bookId}
{{b.bookName}
您已经在使用
*ngFor=“let b of booksArr”
迭代书籍数组

现在需要对数组中每本书的值进行插值。在数组中时，可以访问在
*ngFor
中声明的循环变量。在这种情况下，循环变量为
b
。现在可以使用大括号插值绑定到
b
上的属性<代码>{b.bookId}

书号
书名
{b.bookId}
{{b.bookName}

您已经在遍历书架。只需使用插值来显示数据。像这样试试

书号
书名
{b.bookId}
{{b.bookName}

在这种情况下不需要

*ngIf

。试试下面的方法

<tbody>
        <tr *ngFor="let b of booksArr">
            <td>{{b.bookId}}</td>
            <td>{{b.bookName}}</td>
        </tr>
</tbody>

或

在构造函数内部

constructor(bookId, bookName, cost, quantity)

this.bookName=bookType;