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 结构时，它工作正常，但我想用 select 或类似的方式分离子组件在上面的例子中。

绑定有什么问题？

Stackblitz

Answer 1

你的解决办法是改：

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

Answer 2

这是你想要做的吗？

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

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

我还为你的控制台日志添加了一个 ngOnChanges 只是为了显示输出

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

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

Angular 无法绑定来自父组件的数据

Angular cannot bind data from parent component

2-way-object-databinding

angular-services

angular