Angular无法绑定父组件的数据-Java 学习之路

父组件通过服务向子组件发出数据，但是我无法将数据绑定到子组件（在select中）：

<!-- Parent -->
<div class="form-group">
  <label for="projects" class="text-dark ">Projects:</label>
  <select class="form-control" id="projects" name="project" [(ngModel)]="selectedProject">
      <option *ngFor="let projectElement of projects"
          [ngValue]="projectElement">{{projectElement.name}}</option>
    </select>
</div>

<!-- Child -->
<app-tasks [project]="selectedProject?.tasks"></app-tasks>

当父组件的HTML文件中存在子组件的整个HTML结构时，它工作正常，但我想将子组件与选择器分开，如上例所示 .

绑定有什么问题？

Stackblitz

2 回答

1
这是你想要做的吗？

我刚刚更改了您的任务组件以引用您的任务 . 你有一个不存在的变量所以我只是为你改变它
```
<option *ngFor="let task of this.project">{{ task.name }}
```
我还为控制台日志添加了一个ngOnChanges来显示输出
```
ngOnChanges() {
     console.log(this.project);
  }
```
https://stackblitz.com/edit/cascading-dropdown-jewucx
回复于 2024-05-12T19:01:54+08:00

你的解决方案是改变：

在tasks.component.html中：

<div class="form-group">
  <label for="tasks" class="text-dark ">Tasks:</label>
  <select class="form-control" id="projects">
    <option *ngFor="let task of project">{{ task.name }}  <--- you had here selectedProject, I changed it to project
    </option>
  </select>
</div>

回复于 2024-05-12T19:01:54+08:00

Angular无法绑定父组件的数据

2 回答

相关问题