与服务，component.ts和component.html的通信不起作用

Question

@Injectable({
  providedIn: 'root'
})
export class PatientService {
listpatient;
  constructor(private httpClient:HttpClient) {
    this.httpClient.get("http://localhost:8010/patients").subscribe(data=>{this.listpatient=data;},err=>{console.log(err);})
   }
}

---------------------------------------    
@Component({
  selector: 'app-pat',
  templateUrl: './patient.component.html',
  styleUrls: ['./patient.component.css'],
})
export class PatientComponent implements OnInit {
@Input()listpatient;  
  constructor(patient:PatientService){
   this.listpatient=patient.listpatient;
  }

  ngOnInit() {}
}
---------------------------------------
<table *ngIf="listpatient" class="table">//he don't enter in the table
  <tr>
  <th>ID</th><th>Nom</th><th>Prenom</th> <th></th> 
</tr>

  <tr  *ngFor="let f of listpatient">
    <td>{{f.id}}</td>
    <td>{{f.nom}}</td>
    <td>{{f.prenom}}</td>

    <td routerLink="patientdetail" routerLinkActive="active" type="button" class="btn btn-light">Obtenir les infos</td>

</tr> 
</table>

I load my list of patients from spring, but I have a problem it does not show my list, I think I can not emit the data to the html. It doesn't enter in the *ngIf

Answer 1

In your service you should have a method and it should be returning the call to the db

patientlist() {
return this.httpClient.get("http://localhost:8010/patients")
}

Also, I believe you should be subscribing in the component rather than the service

this.patient.patientlist.subscribe(data=>{this.listpatient=data;},err=>{console.log(err);})

Answer 2

Create a method getPatients() inside the service class as below and call that method in the component.

Service.ts

@Injectable({
    providedIn: 'root'
})
export class PatientService {
    listpatient;
    constructor(private httpClient: HttpClient) { }

    getPatients() {
        this.httpClient.get("http://localhost:8010/patients")
            .map(data => { return data; });
    }
}

Component.ts

@Component({
    selector: 'app-pat',
    templateUrl: './patient.component.html',
    styleUrls: ['./patient.component.css'],
})
export class PatientComponent implements OnInit {
    @Input() listpatient;
    constructor(patient: PatientService) {

    }

    ngOnInit() {
        this.patient.getPatients().subscribe(data => {
            this.listpatient = data;
        });
    }
}

Answer 3

I temporarily resolve this whit that

export class PatientComponent implements OnInit {
  @Input() listpatient;
  constructor(private httpClient:HttpClient){
  }

  ngOnInit() {
    this.httpClient.get("http://localhost:8010/patients").subscribe(data=>{this.listpatient=data})
  }
}