0

我用 Angular 2 开发了一个应用程序。我对 Angular
中的检测变化有疑问。
我解释一下：
我有一个组件：

test.component.ts

@Component({
  selector: 'test',
  template: `
  <h1> Observable </h1>
  <p *ngFor="let exam of listeExamen"> {{exam.patient.name}}</p>
  <button (click)="test()">push</button>
  `
})
export class TestComponent implements OnInit{
  listeExamen: Examen[];

  constructor(public rechercheService: RechercheService){
    this.listeExamen = [];
  }
  ngOnInit(){
    this.rechercheService.retrieveStudies()
      .subscribe((resultat) => {
        let patient = this.getPatient(resultat);
        let study = this.getStudy(resultat);
        this.listeExamen = this.listeExamen.concat([new Examen(patient, study)]);
      });
  }
  test(){
    console.log(this.listeExamen);
  }
}

该组件调用一个服务方法，该方法请求服务器获取带有可观察结果的结果：

recherche.service.ts

@Injectable()
export class RechercheService{
  private champ;
  private resultatRecherche;
  private dicom;
  private client;
  private services;

  constructor(){
      this.champ = infoRecherche;
      this.dicom = require("./app/dicomRequest/dicom.js");
      this.client = this.dicom.loadClient('localhost',
      11112, 'FINDSCU', 'DCM4CHEE');
      this.services = this.dicom.loadServices();
      this.client.on('error', () => {
        console.log("erreur de connexion");
      });
  }
  retrieveStudies(): Observable<any>{
    return new Observable<any>(observer => {
      this.client.connect( () => {
        let cfind = new this.services.CFind();
        this.client.addService(cfind);
          let studyIds = [];
          cfind.retrieveStudies(this.champ,
          [(result) => {
            observer.next(result);
          }]);
        });
    });
}

该retrieveStudies方法堆叠结果和组件转换并将此结果堆叠在一个listeExamen. 此选项卡绑定到组件的模板。使他的Observable工作和堆栈好所有结果都在选项卡中。

问题是 Angular 不更新视图。

observable 完成工作后的结果： 在此处输入图像描述

点击“appuie”后的结果： 在此处输入图片描述

发出用户事件后，结果出现在视图中。
如何自动更新视图？

谢谢。

4

0 回答 0