我有一個 BookArr 類書籍對象數組。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;}}booksArr在 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創建一個表格來顯示這些書籍的詳細信息。 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>
4 回答
LEATH
TA貢獻1936條經驗 獲得超7個贊
您已經在迭代 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>
海綿寶寶撒
TA貢獻1809條經驗 獲得超8個贊
您已經在使用 迭代書籍數組*ngFor="let b of booksArr"。
您現在想要對數組中每本書的值進行插值。當您位于數組內部時，您可以訪問在 中聲明的循環變量*ngFor。在這種情況下，循環變量是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>
qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
在這種情況下不需要*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;
在你的構造函數中
- 4 回答
- 0 關注
- 185 瀏覽
添加回答
舉報
0/150
提交
取消