2017-05-17 18 views
2

親コンポーネント(マスター)にアイテムのリストがあり、アイテムの1つをクリックすると、同じページの別のコンポーネント(子/選択した項目の詳細を表示します。選択した項目をデータベースから削除する子コンポーネントの削除ボタンがあります。角4子コンポーネントのアイテムを削除した後に親コンポーネントを更新する方法

私の質問は、子コンポーネント内のアイテムを削除した後、親コンポーネント内のアイテムのリストを更新するにはどうすればよいですか?

親コンポーネント:

export class ProjectListComponent implements OnInit { 

    projects : Project[]; 
    selectedProject: Project; 

    constructor(private _projectService: ProjectService) { } 

    ngOnInit() { 
    this.projects = []; 
    this.fetchListOfProjects(); 
    } 

    fetchListOfProjects(){ 
    this._projectService.getProject() 
     .subscribe(projects => { 
      this.projects = projects; 
     }) 
    } 

    onSelect(project: Project): void { 
    this.selectedProject = project; 
    } 
} 

子コンポーネント:アイテムが子に削除された場合

export class ProjectItemComponent implements OnInit { 
@Input() project: Project; 
constructor(private _projectService:ProjectService) { } 

ngOnInit() { } 

onDelete(id:any){ 
    if(confirm("Are you sure to delete the project?")) { 
    this._projectService.deleteProject(id) 
     .subscribe(result =>{   
     if(result.status == 204){ 
      console.log('removed'); 
     }; 
     }); 
    }  
} 
} 
+1

どの角度バージョンをお使いですか?あなたが達成しようとしていることを示すコードを追加してください。 –

+0

申し訳ありませんが私のバージョンは4番です。私は自分のコードにあるすべての詳細を追加しました。 –

答えて

2
export class ProjectItemComponent implements OnInit { 
@Input() project: Project; 
constructor(private _projectService:ProjectService) { } 

@Output() 
someEvent = new EventEmitter(); 

ngOnInit() { } 

onDelete(id:any){ 
    if(confirm("Are you sure to delete the project?")) { 
    this._projectService.deleteProject(id) 
     .subscribe(result =>{   
     if(result.status == 204){ 
      console.log('removed'); 
      this.someEvent.emit(null); 
     }; 
     }); 
    }  
} 
<project-item (someEvent)="update()" 

こうupdate()は、親に呼ばれています。

+0

それは動作します、ありがとうございます。 –

+0

ようこそ。それを聞いてうれしいのはあなたのために働いた。 –

関連する問題