代码之家 › 专栏 › 技术社区 › corry

Angular无法从父组件绑定数据

2-way-object-databinding angular-services angular

0

corry · 技术社区 · 7 年前

父组件通过服务向子组件发送数据,但我无法将数据绑定到子组件(在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 回复 | 直到 7 年前

1

Mykola Zatonatskiy 7 年前

您的解决方案是改变:

在任务中。组成部分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

0

Zuriel 7 年前

这就是你想做的吗?

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

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

此外,我还为控制台日志添加了一个ngOnChanges,以显示输出

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

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