Question

问题：为什么我的装订无效？

说明我要从一个组件中获取一些细节，然后将其加载到另一个组件中。我可以看到这些值正在我的控制台中传递，但是我无法让它们绑定到视图中。

我相信这是一个时间问题，因为事件的顺序...用户从第一个组件单击“查看更多”，该组件调用了一个传递值并导航到第二个组件的函数...我知道这些值正在传递，因为我可以在控制台中看到它们...从这里我迷路了，因为我试图绑定HTML的值以进行提取...

第二个问题这是时间问题吗？如果在ngOnInit中设置值，它将显示该值...如果在以下函数中设置该值，则不会显示任何内容...我认为页面首先加载时没有值，然后加载值。有办法解决吗？

代码

//Function that is called from 1st Component//
patientPageLink(data){
    this.ppc.details(data)
    this.router.navigate(['/patient-page']);
}

//2nd Component//

ngOnInit() {
    this.patientName = "Test Name"  *THIS BINDS*
}

details(data){
    console.log("important", data)          *Values are there
    this.getPatientsDetails(data)
    this.patientName = data.first_name      *THIS DOESN'T BIND*
    console.log("check",this.patientName)   *Display's Name*
}


<!-- HTML -->

<table>
    <tr>
        <th class = "thead">First Name</th>
        <th class = "thead">Last Name</th>
        <th class = "thead">Date Of Birth</th>
    </tr>
    <tr >
        <th class = "thead">{{patientName}}</th>
        <th>Johnson</th>
        <th>04/04/1998</th>
    </tr>
</table>

Answer 1

您可能希望通过服务或作为组件的输入传递数据。第一个组件是第二个组件的父项吗？

以下是组件交互的角度文档： https://angular.io/guide/component-interaction#component-interaction

角绑定不起作用/页面加载

1 个答案: