在angular4應用程序中顯示模式對話框中的數據

我有一個角度爲4的應用程序，我想在對話框中顯示數據。因此，我使用@Output將數據從子項傳遞給父組件。在angular4應用程序中顯示模式對話框中的數據

所以，在父組件我有：

export class DashboardComponent { 
    myTask; 


    public returnTask(task: any):void { 
     console.log("returnTask"); 
     this.myTask = task; 
     console.log(this.myTask); 
    } 
    openDialogEditTask() { 
     console.log(this.myTask); 
     let dialogRef = this.dialogEditTask.open(DialogEditTask, { 
      //task 
      data: { 
       start: this.myTask.start, 
       end: this.myTask.end, 
       status: this.myTask.status, 
       user: this.myTask.user, 
       content: this.myTask.content, 
       id: this.myTask.id, 
       rate: this.myTask.rate 
      } 
     }); 
     dialogRef.afterClosed().subscribe(result => { 
      this.selectedOption = result; 
     }); 
} 
}

在父HTML，我有：

<visTimeline (myTask)="returnTask($event)"></visTimeline>

在子組件，我有：

export class VisTimelineComponent { 
    @Output() myTask: EventEmitter<any> = new EventEmitter<any>(); 
}

我發出的任務與self.myTask.emit(task);

所以，我得到父組件中的數據（我可以在控制檯中看到它們），但是我不能在openDialogEditTask中使用它們，因爲它沒有定義。

那麼，你是否知道在調用函數來獲取對話框中的數據之前，我怎樣獲取數據呢？

編輯：這是我的代碼發出DATAS在子組件：

ngOnInit() { 
    Timeline.prototype.onTaskDoubleClick = function(task) { 
     console.log("Double click on task " + task.id); 
     console.log(task); 
     $('#editTask').click(); 
     self.myTask.emit(task); 
    }; 
}

Timeline.prototype.onTaskDoubleClick是從庫中的函數。

來源

2017-07-12 Adrien

什麼時候openDialogEditTask被調用？ –

如何使用openDialogEditTask中的數據，使用安全的操作符可能有助於數據？.whatyouwant –

openDialogEditTask在點擊按鈕時調用： – Adrien

我認爲你不能將數據傳遞給你的模態組件。嘗試使用componentInstance方法。

openDialogEditTask() { 
     console.log(this.myTask); 
     let dialogRef = this.dialogEditTask.open(DialogEditTask, { 
      height: '90%', 
      width: '80%' 
     }); 
     dialogRef.componentInstance.myTaskValue = this.myTask; //<- passing data into DialogEditTask component 
     dialogRef.afterClosed().subscribe(result => { 
      this.selectedOption = result; 
     }); 
}

在DialogEditTask聲明一個變量myTaskValue: any;

你會得到所有你的價值，你傳遞到DialogEditTask組件在此myTaskValue變量

來源

2017-07-12 13:27:13

我能夠將數據傳遞到模態組件，但我認爲我得到的數據太晚了，因爲openDialogEditTask在returnTask之前被調用，所以當我打開對話框時我沒有這些信息，但是我剛剛收到它們。 – Adrien

你如何打開openDialogEditTask（）函數.Plz添加更多代碼。如果您在將this.openDialogEditTask（）放入returnTask（）後自動調用它。否則可能是變化檢測問題。在你的代碼中使用ngZone，你認爲改變它沒有被檢測到。如果可能，請添加代碼的plnkr。 @Adrien –

我通過點擊一個按鈕來調用openDialogEditTask（）。 – Adrien

在angular4應用程序中顯示模式對話框中的數據

回答

相關問題