将http调用数据传输到composechild



首先,对不起我的英语,我在用翻译。

我在将数据从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();
}
}

最新更新