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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (73)
@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>

我从春天加载我的患者列表,但我有一个问题它没有显示我的列表,我想我不能将数据发送到html。它没有进入*ngIf

提问于
用户回答回答于

getPatients()在服务类中创建一个方法,如下所示,并在组件中调用该方法。

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;
        });
    }
}
用户回答回答于

我暂时解决了这个问题

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

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

扫码关注云+社区

领取腾讯云代金券