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

【问题标题】：Angular cannot bind data from parent componentAngular 无法绑定来自父组件的数据
【发布时间】：2018-03-06 13:57:19
【问题描述】：

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

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

【问题讨论】：

您必须使用可注入服务来跨组件共享数据。如果你只想传递一个 id 或一个简单的字符串，那么你可以使用 pathparam 加上一个路由器链接来做到这一点。
你解决了吗？该演示似乎有效
是的，伙计们已经注意到迭代中的错误变量错误。谢谢

标签： angular angular-services 2-way-object-databinding

【解决方案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>

【讨论】：

【解决方案2】：

这是你想要做的吗？

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

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

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

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

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

【讨论】：