如何以角度迭代对象数组

Question

I have an array booksArr of objects of class book.

book.ts class

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;
}}

booksArr in 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),
];

I want to create a table in html to display the details of these books. books-list.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>

Answer 1

Try:

<td> {{ b.bookId }} </td>
<td> {{ b.bookName }} </td>

Answer 2

You are already iterating the array of books with *ngFor="let b of booksArr" .

You want to now interpolate the values from each book in the array. When you are inside the array, you have access to the loop variable you declare in *ngFor . In this case the loop variable is b . You can now bind to the properties on b using curly brace interpolation. {{b.bookId}} .

<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>{{b.bookId}}</td>
      <td>{{b.bookName}}</td>
    </tr>
  </tbody>
</table>

Answer 3

You are already iterating through the booksArr.just need to use interpolation to display the data. Try like this

<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>{{b.bookId}}</td>
            <td>{{b.bookName}}</td>
        </tr>
    </tbody>
</table>

Answer 4

No *ngIf is required in this case. Just try the following

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

And in your .ts file you should either change

constructor(bookId, bookName, cost, quantity)

Or

this.bookName=bookType;

inside your constructor