首先,对不起我的英语,我在用翻译。
我在将数据从http请求传递到子组件时遇到问题。
首先,我使用两个服务获取数据,这部分工作正常。
服务原则服务
llamadaGet(url2: string, datosLlamada: any) {
return this.http.get(ServicioPrincipal.myUrl+url2, datosLlamada);
}
servicio-secundario.services.ts
getDatos () {
const myParametros = {parametro1: 'texto1', parametro2: 'texto2'};
return this.sesionServ.peticionGet('textoUrl/texto', myParametros);
}
然后,我从一个组件调用它们,通过执行console.log
,数据会显示出来,但我将其发送到一个子组件,在那里看不到(在子组件中(。
component1.com.component.html
<componente-hijo [datos]="myDatos">
组件1.组件.ts
constructor(private servicioPrincipal: ServicioPrincipal, private servicioSecundario: ServicioSecundario) {
this.ServicioSecundario.getDatos()
.subscribe((data: any) => {
console.log(data); // Here if the data is shown
this.myDatos = data;
});
}
componenteHijo.component.html(这是不显示数据的地方(
<p *ngFor="let registro of datos">{{registro.campo1}} {{registro.campo2}}</p>
组件Hijo.component.ts
@Input() datos: any[] = [];
ngOnChanges() {
console.log(this.datos);
}
如果您将原始数据发送到子组件(而不进行http请求(,则显示该数据。
编辑:执行ngOnChanges((时,数据会显示在子级中,但不会传递到视图。
我将感谢你的帮助。
提前谢谢。
最后我发现eroor与所谓的http无关,而是与视图中显示的数据由一个函数过滤的事实有关,并且必须在源数据的每次更改时调用该函数才能更新:
componenteHijo.component.html
<p *ngFor="let registro of _datos">{{registro.campo1}} {{registro.campo2}}</p>
组件Hijo.component.ts
ngOnInit(): void {
this.filtro();
}
filtro() {
this._datos = this.filtrado.transform(this.datos,this.palabra);
}
ngOnChanges() {
this.filtro();
}
并使其更高效
ngOnChanges(changes: SimpleChanges) {
if (changes.datos && changes.datos.currentValue) {
this.filtro();
}
}