javascript - 即使属性已更改，视图也不会更新

Question

我有调用 API 来获取数据的函数getData()。我用这种方式从另一个组件调用函数（为了便于阅读，我将组件名称更改为 MainComponent 和 AnotherComponent）：

import MainComponent from ./../main-component/main-component

...

export class AnotherComponent extends OnInit {
   ...

   constructor(private _maincomp: MainComponent){}

   onClick = () => {
      this._maincomp.getData();
   }
}

当我检查 MainComponent 属性中的数据时，它已经改变了，但视图没有。我该如何解决？

这是 MainComponent 上的 html：

<div class="row table-container shadow rounded mt-4 ml-1">
   <table mat-table class="data-table mat-elevation-z10" [dataSource]="datas">
       <ng-container matColumnDef="Order ID">
           <mat-header-cell class="header order-id-col" *matHeaderCellDef>Order ID</mat-header-cell>
           <mat-cell class="order-id-col col-data" *matCellDef="let data">{{ data.order_id }}</mat-cell>
       </ng-container>

       //another ng-container goes here...

       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </table>
</div>

这是 MainComponent 的 .ts 文件：

export class MainComponent implements OnInit {

   displayedColumns = ['Order ID', 'Order By', 'Batch Kultur', 'Jenis Media', 'Jenis Vessel', 'Jumlah Ordered',
                    'Tanggal Order', 'Tanggal Pakai', 'Status', 'Action'];
   datas;
   filter;

   constructor(private _service: DataModelService) { }

   ngOnInit() {
       this.getData();
   }

   getData = () => {
       this._service.getData(1, 10, this.filter , 'media-request')
                .subscribe(
                    res => {
                        this.datas = res.data.data;
                    },
                    err => {
                        console.log(err);
                    }
                );
   }  
}

这是调用MainComponent中的函数的AnotherComponent：

import { MainComponent } from '../main-component/main-component.component';

export class MainComponent implements OnInit {

  constructor(public _maincomp: MainComponent) { }

  ngOnInit() {}


  onClick = () => {
      this._router.navigate([`dashboard/main-component`]);

      setTimeout(() => {
        this._maincomp.getData();
      }, 1000)
  }
}

标签： javascriptangulartypescript

Answer 1

尝试使用ChangeDetectorRef：

constructor(
  private cdRef: ChangeDetectorRef,
  private _maincomp: MainComponent
) {}

onClick = () {
  this._maincomp.getData();
  this.cdRef.detectChanges();
}