Данные, не передаваемые родителю из дочернего компонента angular 8 - PullRequest
Новая
       1

Данные, не передаваемые родителю из дочернего компонента angular 8

0 голосов
/ 19 сентября 2019

У меня есть выпадающий список, который должен передать выбранный объект шрифта обратно родителю.Но по какой-то причине, и я не могу понять, почему, ключ печатает, но объект шрифта возвращает неопределенный.Он просто не хочет связываться.

.html 

<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>
<button class="update" (click)="updateFont('header_font', selectedFont)">Update Font</button>

.child-html 

<li>
    <select *ngIf="fonts" [(ngModel)]="selectedFont" (click)="selectFont(selectedFont)">
        <option disabled hidden [value]="selectUndefinedOptionValue">Choose a New Font
        </option>
        <ng-container *ngFor="let font of fonts; let i = index;">
            <option [ngValue]="font">{{ font.font_family }}</option>
        </ng-container>
    </select>
</li>

.child-component.ts 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Fonts } from '../fonts';

@Component({
  selector: 'app-settings-font-selector',
  templateUrl: './settings-font-selector.component.html',
  styleUrls: ['./settings-font-selector.component.scss']
})
export class SettingsFontSelectorComponent implements OnInit {

  @Input()
  fonts: Fonts[];

  selectedFont: Fonts;

  @Output()
  private newFont = new EventEmitter<Fonts>();

  constructor() { }

  ngOnInit() {
  }

  public selectFont() {
    const selectedFont = this.selectedFont
    this.newFont.emit(selectedFont);
  }

}

тогда в моем родителе я делаю это:

parent-component.ts 

selectedFont: Fonts;

public getFontValue(selectedFont: Fonts){
  if(selectedFont){
    this.selectedFont = selectedFont;
  }
}

updateFont(key: string){
  console.log(key, this.selectedFont);
}

Не могу понять, почему переменная не является обязательной.Кто-нибудь может увидеть, что я здесь делаю не так?

Ответы [ 3 ]

0 голосов
/ 19 сентября 2019

В привязке вы должны использовать имя параметра @Output.Вы используете имя открытого метода, который вызывает событие.

В родительском HTML-коде привязка должна быть newFont вместо selectFont.Следующий код должен работать:

Родительский HTML: 

<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>
<button class="update" (click)="updateFont('header_font', selectedFont)">Update Font</button>

ОБНОВЛЕНИЕ: Также попробуйте переместить console.log на getFontValue метод на родителя.Сделайте @output в дочернем общедоступном.

0 голосов
/ 19 сентября 2019

имя отправителя события - это, в основном, метод, который вы пытаетесь вывести от дочернего к родительскому. 

<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>

, в вашем случае это newFont.

пример: sample

0 голосов
/ 19 сентября 2019

EventEmitter - это элемент, который вы должны включить в свой пользовательский HTML-селектор app-settings-font-selector в качестве ссылки.В вашем случае: 

(newFont)="getFontValue($event)"
...