javascript - 获取有关组件负载的数据

Question

我有一个组件需要在组件/页面加载的网格中显示数据，当从父组件单击按钮时，它需要用新数据刷新网格。我的组件如下所示

export class TjlShipdateFilterComponent implements DoCheck {

  tljShipDate: ShipDateFilterModel[];

  constructor(private psService: ProjectShipmentService) {
  }

 ngDoCheck() {
 // this data is from the service, trying to get it on Page load
  }

@Input() filter: ShipDateFilterModel[];
//Load or refresh the data from parent when the button clicked from parent component 
ngOnChanges(changes: SimpleChanges) {
}

ngOnChanges 工作正常，它从父组件获取数据并在从父组件单击按钮时显示。但是在加载页面/组件时，网格不显示任何内容并显示 this.psService.tDate; is undefined。

下面是我获取 tDate

的服务

export class ProjectShipmentService {
   ......    
  constructor(service: DataService, private activatedRoute: ActivatedRoute) {
      service.get<ShipDateFilterModel[]>(this.entityUrl).subscribe(x => this.tDate = x);
   }

我不确定我在这里错过了什么。我怎样才能实现这种情况

Answer 1

发生这种情况是因为在加载组件时，您的服务中的请求可能尚未完成并且数据可能还没有返回，这就是为什么 tDate 是 undefined ，尝试订阅在您的组件中使用 ngOnInit() 而不是 ngDoCheck()。

在您的服务中:

tDate: Observable<ShipDateFilterModel[]>

constructor(service: DataService, private activatedRoute: ActivatedRoute) {
    ...
    this.tDate = service.get<ShipDateFilterModel[]>(this.entityUrl)
}

在你的组件中:

export class TjlShipdateFilterComponent implements OnInit, OnChanges {

  tljShipDate: ShipDateFilterModel[];

  constructor(private psService: ProjectShipmentService) {
  }

  ngOnInit() {
  // this data is from the service, trying to get it on Page load
    this.psService.tDate.subsribe(x => this.tljShipDate = x);
  }

  @Input() filter: ShipDateFilterModel[];
  //Load or refresh the data from parent when the button clicked from parent component 
  ngOnChanges(changes: SimpleChanges) {
  if (changes.filter && changes.filter.currentValue)
   {     
     this.tljShipDate = this.filter;
  }
 }
}