在angular 2+中刷新同级组件的视图；

我有两个同级组件，第一个是用于创建的表单，另一个是显示结果。它们都显示在父零部件（仪表板）上。当我在第一个组件（创建新任务）中提交数据时，如果成功，我将从第二个组件调用ngOnInit（）函数。它被触发，数据被加载，但由于某些原因视图并没有刷新。为什么？有什么想法吗

形成组件smth，如下所示：

import { DisplayDataComponent } from '..'

@Component({   
selector: '.....',   
templateUrl: '...',   
styleUrls: ['....'],   
providers: [ DisplayDataComponent ] }) 

export class FormComponent implements OnInit {

          constructor(
            private displayComponent: DisplayDataComponent,   ) {

          refreshDisplayComp() {
            this.displayComponent.ngOnInit();  // <--- and its being triggered...
          }



         formSubmitingFunction(data) { 
              this.someservice.submitData(data).subscribe(res => {
                 this.refreshDisplayComp() 
             }, err => {
                 ...
            })
         }
     }

  @Component({   
    selector: '.....',   
    templateUrl: '...',   
    styleUrls: ['....'],   

    export class DisplayDataComponent implements OnInit {
            data = [];


              constructor(
                ) {

              ngOnInit() {
                  loadData();
              }



             loadData() { 
                  this.someservice.getData().subscribe(res => {
                     this.data = res.data;
                     console.log(this.data) // <--- it shows data is loaded but not displayed?
                 }, err => {
                     ...
                })
             }
         }

从“..”导入{DisplayDataComponent}
@组件（{
选择器：“……”，
templateUrl:“…”，
样式URL:['..']，
提供程序：[DisplayDataComponent]}）
导出类FormComponent实现OnInit{
建造师(
专用displayComponent:DisplayDataComponent，）{
refreshDisplayComp（）{
此.displayComponent.ngOnInit（）；//{
this.refreshDisplayComp（）
}，err=>{
...
})
}
}

用于显示的组件，smth如下所示：

import { DisplayDataComponent } from '..'

@Component({   
selector: '.....',   
templateUrl: '...',   
styleUrls: ['....'],   
providers: [ DisplayDataComponent ] }) 

export class FormComponent implements OnInit {

          constructor(
            private displayComponent: DisplayDataComponent,   ) {

          refreshDisplayComp() {
            this.displayComponent.ngOnInit();  // <--- and its being triggered...
          }



         formSubmitingFunction(data) { 
              this.someservice.submitData(data).subscribe(res => {
                 this.refreshDisplayComp() 
             }, err => {
                 ...
            })
         }
     }

  @Component({   
    selector: '.....',   
    templateUrl: '...',   
    styleUrls: ['....'],   

    export class DisplayDataComponent implements OnInit {
            data = [];


              constructor(
                ) {

              ngOnInit() {
                  loadData();
              }



             loadData() { 
                  this.someservice.getData().subscribe(res => {
                     this.data = res.data;
                     console.log(this.data) // <--- it shows data is loaded but not displayed?
                 }, err => {
                     ...
                })
             }
         }

@组件（{
选择器：“……”，
templateUrl:“…”，
样式URL:['..']，
导出类DisplayDataComponent实现OnInit{
数据=[]；
建造师(
) {
恩戈尼尼特（）{
loadData（）；
}
loadData（）{
this.someservice.getData（）.subscribe（res=>{
this.data=res.data；
console.log（this.data）//{
...
})
}
}

显示数据的Html部分

<div class="card-body sub-body">
            <div class="event row" *ngFor="let note of data; let i = index"  [attr.data-index]="i">
                <div class="col-md-9"> {{note.note}} </div>
            <div class="col-md-3 icons" *ngIf="note.creatorId == currentUserId">
                <i class="fa fa-pencil-square-o" aria-hidden="true" (click)="openModal(template1, note, 2)"></i>
                <i class="fa fa-times" aria-hidden="true" (click)="deleteNote(note.id)"></i>
            </div>
        </div>
    </div>

{{note.note}

显示数据组件的日志：

---

第一个数组是initial ngOnInit（），第二个数组是在成功创建之后。因此，它被调用、加载但未显示

尝试将加载数据函数设置为箭头函数，这样您就知道这将是您的组件，而不是您的服务

loadData = () => { 
              this.someservice.getData().subscribe(res => {
                 this.data = res.data;
                 console.log(this.data) // <--- it shows data is loaded but not displayed?
             }, err => {
                 ...
            })
         };

loadData=（）=>{
this.someservice.getData（）.subscribe（res=>{
this.data=res.data；
console.log（this.data）//{
...
})
};

---

您需要了解这是如何与普通函数和箭头函数绑定的。

正如@Andreas所建议的，由于某种原因，这种方法不起作用。弄不清为什么我当时甚至能够触发函数。我猜它被视为一种服务。无论如何，按照他左边的说明（案例1）使它起作用。我不会复制我的代码，因为它非常凌乱，而且我没有时间来编写虚拟代码。。但是在这里，你已经做到了，所以请按照它来做。

如果没有看到你视图中的标记，我们就没有办法帮你。@AdrianBrand显示数据的部分？Addddon别担心，我已经回答了你下面的问题，问题不在你的视图中您的视图。这不是实现组件间通信的正确方法。请尝试中描述的方法之一，然后尝试将loadData的内容放入ngOnInit方法。仍然相同。我认为这不是问题，函数正在触发，数据正在加载，您可以在控制台日志中看到它已加载，但视图i因为某些原因，它并没有刷新…就像它并没有看到数据数组值的变化一样