Cree un componente principal secundario en angular. Cree archivos JSON con los siguientes datos parent.json
"Identificación": 10001. "nombre":"Juan"
"Id":10002, "nombre":"Sam
"Id":10003, "nombre":"Tom"
"Id":10004, "nombre":"Tom"
niño.json
"Identificación": 10001. "20 años
lo 10002 "edad":"50"
"id":10003. "edad": "25"
}} Obtenga el archivo parent.json a través de un método http "get" y muestre el nombre en el menú desplegable del padre
componente
Al seleccionar el nombre en el menú desplegable, envíe la identificación al componente secundario. El componente hijo buscará al hijo. json a través de una llamada http, compare la identificación y muestre la edad de la persona en el componente secundario. Si la identificación no está presente en el componente secundario, json enviará un mensaje al componente principal, que será
se muestra en el componente principal
"No hay datos presentes Crear un servicio, 2 componentes (principal y secundario)
Nota: No comparta el módulo de nodo.
El siguiente es el ejemplo de código, en lugar de " de " operador rxjs, puede llamar a los archivos json reales
Componente padre.
import { Component, OnInit } from '@angular/core'; import { of } from 'rxjs'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { parentData = []; selected = ""; ngOnInit(): void { this.getParentJson().subscribe( (data) => { this.parentData = data; } ) } getParentJson() { return of([ { id: 100, name: 'Abc', }, { id: 101, name: 'Xyz', }, { id: 102, name: 'Efg', }, ]); } childCallback(ev){ console.log(ev); // YOU WILL RECEIVE MESSAGE FROM CHILD COMPONENT } }Componente padre html
<select [(ngModel)]="selected"> <option *ngFor="let p of parentData" [value]="p.id"> {{p.name}} </option> </select> <app-child-select [idVal]="selected" (callback)="childCallback($event)"></app-child-select>Componente hijo
import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'; import { of } from 'rxjs'; @Component({ selector: 'app-child-select', templateUrl: './child-select.component.html', styleUrls: ['./child-select.component.css'] }) export class ChildSelectComponent implements OnInit, OnChanges { @Input() idVal:any = ""; @Output() callback = new EventEmitter(); data = []; selected = ""; constructor() { } ngOnInit() { } ngOnChanges(e){ console.log(e.idVal); if(!e || !e.idVal || !e.idVal.currentValue){ this.data = []; this.callback.emit({status: 'NO_ID_VALUE'}); return; } const v = e.idVal.currentValue; this.loadData(v); } loadData(id){ this.getChildJson(id).subscribe( (r) => { this.data = r; if(this.data.length === 0){ this.callback.emit({status: 'NO_DATA_FOUND'}); } } ) } getChildJson(id) { const arr = [ { id: 100, age: 10, }, { id: 100, age: 20, }, { id: 101, age: 25, }, ]; return of(arr.filter(e => e.id == id)); } }Componente hijo html
<select [(ngModel)]="selected"> <option *ngFor="let p of data" [value]="p.id"> {{ p.age }} </option> </select>