通过@Input（）

Question

我有一个Angular 5应用程序，我有一个项目列表。用户单击项目，项目详细信息将显示在弹出窗口中。详细视图是子组件。我通过 @Input

将数据传递到详细信息视图

父组件模板：

 // User clicks this button to pass the "clicked upon" project to the onSelect() function.

 <a class="uk-button uk-button-default" id="edit-btn" (click)="onSelect(project)" uk-toggle="target: #project-detail">View Project Details</a>


// Nested Child Component

   <project-detail [project]="selectedProject"></project-detail>

父组件：

// The onSelect() function

onSelect(project: IProject) {
    this.selectedProject = JSON.parse(JSON.stringify(project));
  }

子组件：

@Input() project: IProject;

子组件模板：

   <div id="fullName"><h1>{{project?.firstName + " " + project?.lastName}}</h1></div>
   <div id="title"><h2>{{project?.title}}</h2></div>
   <div id="summary"><p>{{project?.summary}}</p></div>

问题：

此问题有时会出现，但如果用户选择项目A 查看其详细信息，然后选择项目B 来查看其详细信息。详细信息视图显示项目A的数据。无论用户点击哪个项目，详细信息视图都只会显示项目A的详细信息。

我做错了什么？