我是 Angular 新手。我正在尝试在 Bootstrap 模式中以 Angular 构建一个简单的表单,并对数据执行编辑功能。当我 console.log 是否正在相应地获取数据时,我可以看到它是。问题是字段是空白的。我不知道为什么会收到此错误。请在这里帮助我。
这是我迄今为止所尝试过的。
openModal() {
console.log("Content Object:", this.content); // Log the content object
if (this.content._id && this.content._id.$oid) {
this.currentTaskId = this.content._id.$oid;
} else {
console.error('Task ID is not in the expected format:', this.content._id);
return; // Exit the function if the ID format is not as expected
}
console.log("Current Task ID:", this.currentTaskId); // Log the extracted task ID
this.fetchTaskDetails(this.currentTaskId);
}
fetchTaskDetails(taskId: string) {
this.taskService.getTask(taskId).subscribe(
(taskData) => {
console.log('Fetched Task Data:',taskData);
this.taskToEdit = taskData;
// Now taskToEdit is bound to your form fields
},
(error) => {
console.error('Error fetching task details', error);
// Handle error fetching task details
}
);
}
我的 HTML 文件
<!-- Modal -->
<div
class="modal fade"
id="exampleModalCenter"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered custom-modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="update-issue-container">
<h2>Update Task</h2>
<form>
<!-- Hidden input for taskId -->
<input type="hidden" id="taskId" [value]="currentTaskId" />
<div class="form-group">
<label for="projectDropdown">Project</label>
<select id="project" name="project" class="form-control" [(ngModel)]="taskToEdit.project">
<option value="project1">Project 1</option>
<option value="project2">Project 2</option>
<!-- Add more project options here -->
</select>
</div>
<div class="form-group">
<label for="issueTypeDropdown">Issue Type</label>
<select id="issuetype" name="issuetype" class="form-control" [(ngModel)]="taskToEdit.issuetype">
<option value="task">Task</option>
<option value="bug">Bug</option>
<!-- Add more issue type options here -->
</select>
</div>
<div class="form-group">
<label for="statusDropdown">Status</label>
<select id="status" name="status" class="form-control" [(ngModel)]="taskToEdit.status">
<option value="to-do">To-Do</option>
<option value="in-progress">In Progress</option>
<option value="done">Done</option>
<!-- Add more status options here -->
</select>
</div>
<div class="form-group">
<label for="summary">Summary</label>
<input type="text" id="summary" name="summary" class="form-control" [(ngModel)]="taskToEdit.summary" />
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" id="description" name="description" [(ngModel)]="taskToEdit.description"></textarea>
</div>
<div class="form-group">
<label for="assigneeDropdown">Assignee</label>
<select id="assignee" name="assignee" class="form-control" [(ngModel)]="taskToEdit.assignee">
<option value="user1">User 1</option>
<option value="user2">User 2</option>
<!-- Add more assignee options here -->
</select>
</div>
<div class="form-group">
<label for="reporterDropdown">Reporter</label>
<select id="reporter" name="reporter" class="form-control" [(ngModel)]="taskToEdit.reporter">
<option value="user1">User 1</option>
<option value="user2">User 2</option>
<!-- Add more reporter options here -->
</select>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>
如有任何帮助,我们将不胜感激!谢谢!
当您点击保存按钮时,您需要调用 onClick 函数。
button type="button" class="btn btn-primary" onClick="fetchTaskDetails(this)">保存更改
您还必须在某个时候打开模式。干得好,继续努力。