Angular无法绑定父组件的数据

Question

父组件通过服务向子组件发出数据，但是我无法将数据绑定到子组件（在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

Answer 1

这是你想要做的吗？

我刚刚更改了您的任务组件以引用您的任务。你有一个不存在的变量所以我只是为你改变它

    <option *ngFor="let task of this.project">{{ task.name }}

我还为控制台日志添加了一个ngOnChanges来显示输出

  ngOnChanges() {
     console.log(this.project);
  }

https://stackblitz.com/edit/cascading-dropdown-jewucx

Answer 2

你的解决方案是改变：

在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>