Как перебрать массив объектов в angular

Question

У меня есть массив booksArr объектов класса 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 в списке книг .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 для отображения сведений об этих книгах. 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

Нет *ngIf требуется в этом случае. Просто попробуйте следующее

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

И в вашем файле .ts вы должны либо изменить

constructor(bookId, bookName, cost, quantity)

, либо

this.bookName=bookType;

внутри вашего конструктора

Answer 2

Вы уже перебираете массив книг с *ngFor="let b of booksArr".

Теперь вы хотите интерполировать значения из каждой книги в массиве. Когда вы находитесь внутри массива, у вас есть доступ к переменной l oop, которую вы объявляете в *ngFor. В этом случае переменная l oop равна b. Теперь вы можете привязать свойства b, используя интерполяцию фигурных скобок. {{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

Вы уже перебираете booksArr. Просто необходимо использовать интерполяцию для отображения данных. Попробуйте вот так

<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

Попробуйте:

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