我在Angular中创建了一个表单。在hotel.view.html文件的中间，我有一个表：
<table id="rooms">
<tr>
<td>Room Type</td><td>Beds</td><td>Q.ty</td>
</tr>
<tr>
<td><input [(ngModel)]="HotelModel.rooms[0].type" name="type" type="text"></td>
<td><input [(ngModel)]="HotelModel.rooms[0].beds" name="beds" type="number" class="smallField"></td>
<td><input [(ngModel)]="HotelModel.rooms[0].qty" name="qty" type="number" class="smallField"></td>
</tr>
</table>在hotel.component.css中，我有：
.smallField {
display: inline-block;
width: 50px;
}
.bigField {
display: inline-block;
width: 170px;
}“显示”的原因：内联块;“一开始我是在添加一个DIV但是，如果我删除它，什么也不会发生。
表行中的字段显示正确。现在，我需要在按下按钮时添加一行。我是这样做的：
$("#addRoom").on("click", function() {
$('#rooms tr:last').after(
'<tr><td><input [(ngModel)]="HotelModel.rooms[' + rm + '].type" name="type" type="text"></td>' +
'<td><input [(ngModel)]="HotelModel.rooms[' + rm + '].beds" name="beds" type="number" class="smallField"></td>' +
'<td><input [(ngModel)]="HotelModel.rooms[' + rm + '].qty" name="qty" type="number" class="smallField"></td></tr>');
rm = rm + 1;
});现在，正确添加了表行，并显示了字段，但它们不接受“class=“smallField”，所以我有这样的东西：
有没有什么想法如何设计它们？谢谢
1条答案
按热度按时间yhived7q1#
正如我在上面的评论中提到的，永远不要在Angular项目中使用jQuery。你在这里所做的是相当基本的，它可以单独使用Angular来完成。
我假设你的数据在一个数组中，所以你所要做的就是向这个数组中添加一个新的元素。Angular会知道它，这比尝试使用单独的库来注入Angular需要知道和解析的原始HTML要容易得多。
只需使用Angular
ngFor循环来显示数组。该按钮将向数组中添加一个新项，这就是您要做的全部工作。