Bootstrap + 角度模态编辑字段数据不可见

Question

我是 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>

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

当您点击保存按钮时，您需要调用 onClick 函数。

button type="button" class="btn btn-primary" onClick="fetchTaskDetails(this)">保存更改

您还必须在某个时候打开模式。干得好，继续努力。