[英]Data not being passed to parent from child component angular 8
I have a select dropdown which should pass the selected font object back up to the parent.我有一个 select 下拉列表,它应该将所选字体 object 传递回父级。 But for some reason and I cannot see why, the key is printing, but the font object is returning undefined.
但由于某种原因,我不明白为什么,关键是打印,但字体 object 返回未定义。 It just doesn't want to bind.
它只是不想绑定。
.html .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 .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 .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);
}
}
then in my parent, I am doing this:然后在我的父母中,我正在这样做:
parent-component.ts父组件.ts
selectedFont: Fonts;
public getFontValue(selectedFont: Fonts){
if(selectedFont){
this.selectedFont = selectedFont;
}
}
updateFont(key: string){
console.log(key, this.selectedFont);
}
I can't seem to understand why the variable isn't binding.我似乎无法理解为什么该变量没有绑定。 Can anyone see what I'm doing wrong here?
谁能看到我在这里做错了什么?
The eventEmitter is the element you must include into your custom html selector app-settings-font-selector
as the reference. eventEmitter 是您必须包含在自定义 html 选择器
app-settings-font-selector
中作为参考的元素。 In your case:在你的情况下:
(newFont)="getFontValue($event)"
In the binding, you must use the name of the @Output parameter.在绑定中,您必须使用@Output 参数的名称。 You're using the name of the public method that fires the event.
您正在使用触发事件的公共方法的名称。
I the parent HTML the binding should be newFont
instead of selectFont
.我的父 HTML 绑定应该是
newFont
而不是selectFont
。 The following code should work:以下代码应该可以工作:
Parent html:父 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>
UPDATE: Also try to move the console.log
to the getFontValue
method on parent.更新:还尝试将
console.log
移动到父级的getFontValue
方法。 Make @output in child public.将子项中的@output 设为公开。
the event emitter name is basically the method you are trying to output from child to parent.事件发射器名称基本上是您尝试从子级到父级的 output 的方法。
<app-settings-font-selector (newFont)="getFontValue($event)" [fonts]="fonts"></app-settings-font-selector>
which in your case is newFont.在你的情况下是newFont。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.