代码之家 › 专栏 › 技术社区 › Kerim092

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

angular

-1

Kerim092 · 技术社区 · 6 年前

我有两个同级组件,第一个是用于创建的窗体,另一个是显示结果。它们都显示在父零部件(仪表板)上。当我在第一个组件(createnewtask)中提交数据时,一旦成功,我就从第二个组件调用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 => {
                 ...
            })
         }
     }

用于显示的组件,smth如下所示:

  @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 => {
                     ...
                })
             }
         }

显示数据的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>

第一个数组是initial ngOnInit(),第二个数组是在成功创建之后。所以它被称为,加载,但不显示

2 回复 | 直到 6 年前

Adrian Brand 6 年前

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

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

Kerim092 6 年前

正如@Andreas所说,出于某种原因,这种方法不起作用。搞不懂为什么我能触发函数。我猜这是一种服务。不管怎么说,我是按照 link 他离开了(案例一)。我不会复制我的代码,因为它非常混乱,我很短的时间来写一个假的。。但在这件事上 github link