Angular не может привязать данные из родительского компонента

родительский компонент передает данные через службу дочернему компоненту, но я не могу привязать данные к дочернему компоненту (в 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


angular angular-services 2-way-object-databinding
person corry    schedule 06.03.2018    source источник
comment
Вам нужно будет использовать сервис с возможностью инъекции для обмена данными между компонентами. Если вы хотите передать только идентификатор или простую строку, вы можете сделать это с помощью pathparam в сочетании со ссылкой маршрутизатора.   -  person Sadiq Ali    schedule 06.03.2018
comment
Вы решили? Демо вроде работает   -  person Vega    schedule 06.03.2018
comment
Да, ребята заметили ошибку в итерации с неправильной переменной. Спасибо   -  person corry    schedule 07.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Это то, что вы пытаетесь сделать?

Я просто изменил ваш компонент задач, чтобы он ссылался на ваши задачи. у вас была переменная, которой не было, поэтому я просто изменил ее для вас

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

также я добавил ngOnChanges для вашего журнала консоли, чтобы показать результат

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

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

person Zuriel    schedule 06.03.2018

arrow_upward
1
arrow_downward

ваше решение - изменить:

В 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>
person Nikolay Zatonatskiy    schedule 06.03.2018