我正在使用陣列創建一個 crud 應用程式。將專案添加到陣列后，html 輸入欄位不會清除/重置。我不認為 angular 有重置方法，因為我在網上找不到任何東西。添加專案后如何清除輸入欄位？
這是我的代碼：
應用程式組件.html
<div class="container">
<div class="jumbotron text-center">
<h1>Angular CRUD</h1>
</div>
<div class="container">
<form class="form-inline custom-centered" name="itemForm">
<label for="item">Add an Item:</label>
<input type="text" class="form-control" name="Value" id="Value" #item>
<button type="submit" class="btn btn-success" (click)="create(item.value)" style="width: 80px;">Add</button>
</form>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of collection">
<td>{{item.name}}</td>
<td>
<button class="btn btn-info btn-sm mr-1">Edit</button>
<button (click)="deleteItem(item)" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</tbody>
</table>
app.component.ts
export class AppComponent {
collection: any = [];
create(item: any) {
this.collection.push({
name: item
});
}
deleteItem(item: any) {
this.collection.splice(item, 1);
}
}
誰能指導一下，謝謝
uj5u.com熱心網友回復：
Angular 具有反應式的 reset() 方法。但是在這里你沒有使用反應形式，所以這里重置輸入的方法是，用這個替換你的方法 -
(click)="create(item.value); item.value = ''"
如果您的表單很大，則建議使用反應式表單。在這個例子中，你使用的是什么。
您的作業示例在這里。
uj5u.com熱心網友回復：
我想你寫在那里
create() {
this.collection.push({
name: ''
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362674.html
上一篇：React，為什么這個useEffect在加載時被觸發？[復制]
下一篇：將值傳遞給另一個組件