首页 文章

父函数在子组件中返回undefined - angular2

提问于
浏览 次
1

我是Angular 2的新手，所以请宽容 .

我想在子组件中使用函数（在父组件中声明） . 我正在使用@output . 这个函数应该返回一些字符串，而child需要将这个字符串发送给api .

所以我有一些父功能：

public ToJsonDate = (value: string) =>{

    try {
        let parts = value.split('-').map(Number);
        parts[1] -= 1;
        let date = new Date(Date.UTC.apply(null, parts));
        let textContent = '/Date(' + date.getTime() + '' + this.invoiceDataParent['temp'].Zone + ')/';
        console.log('test1', textContent);
        return textContent;
    } catch(error){
        console.log(error);
    }

}

在HTML中我有：

div class="column2"><invoice [invoiceDataREST]='invoiceDataParent' (jsonDate)="ToJsonDate($event)"></invoice></div>

在子组件我正在使用输出机制：

@Output() jsonDate: EventEmitter<string> = new EventEmitter<string>();

我想要做的是在另一个孩子中执行此功能：

private sendInvoiceRequest() {
    this.isEdit = false;

    this.invoiceDataREST['ResponseDetails'].DocumentDate = this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);
 console.log('test2',this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);}

现在：控制台中的test1显示良好的输出 - 所以这个功能肯定会执行，但是控制台中的测试2显示'undefined'

谁能解释一下我做错了什么？我错过了什么吗？

javascript angular data-binding

1 回答

  • 1

    Output 属性不是双向的 . 他们发送数据，期间 . 没有通过输出事件 Launcher 接收输入 . 你要做的是创建一个 Input 属性，以及父函数将更新的值分配给子组件 . 例如：

    <div class="column2"><invoice [invoiceDataREST]='invoiceDataParent' (jsonDate)="ToJsonDate($event)"></invoice></div>

export class Parent{



    public ToJsonDate = (value: string) =>{

        try {
            let parts = value.split('-').map(Number);
            parts[1] -= 1;
            let date = new Date(Date.UTC.apply(null, parts));
            let textContent = '/Date(' + date.getTime() + '' + this.invoiceDataParent['temp'].Zone + ')/';
            console.log('test1', textContent);

            //assign new value to property that goes back into child component
            this.invoiceDataParent['ResponseDetails'].DocumentDate = textContent;
        } catch(error){
            console.log(error);
        }

    }

}



export class Child{
   @Input() invoiceDataREST: any;
   @Output() jsonDate: EventEmitter<string> = new EventEmitter<string>();

   private sendInvoiceRequest() {
    this.isEdit = false;

    this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);
   }

}

    我尝试更新您的代码以显示它应该如何工作 . emit 不从父级检索值 . 它只是将值发送给父级 . 然后，父级将值分配给发送到子级的对象上的正确属性 .

    希望这可以帮助 .

    回复于

相关问题