问题描述
限时送ChatGPT账号..我有一个组件需要在组件/页面加载的网格中显示数据,当从父组件单击按钮时,它需要用新数据刷新网格.我的组件如下
I have a component which needs to show the data in the grid on the component/page Load and when a button is clicked from parent component it needs refresh the grid with new data. My component is like below
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;
未定义.
The ngOnChanges works fine, it gets the data from the parent component and displays when the button is clicked from the parent component. But on load of the page/component the grid it doesn't show anything and says 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);
}
我不确定我在这里遗漏了什么.我怎样才能实现这个场景
I am unsure what am I missing here. How can I achieve this scenario
推荐答案
发生这种情况是因为在加载组件时,您的服务中的请求可能没有完成,数据可能还没有返回,这就是为什么 tDate
是 undefined
,尝试在你的组件中订阅它,也使用 ngOnInit()
而不是 ngDoCheck()
.
It happened because when the component is loaded, the request in your service may not completed and the data may not return yet, that why tDate
is undefined
, try subscribe to it inside your component, also use ngOnInit()
instead of 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;
}
}
}
这篇关于获取有关组件负载的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论