异步更新数组不会使用 *ngFor 更新 html。只有页面刷新有效。如何让它实时更新？

Question

应用组件

<app-navbar></app-navbar>
<div class="row">
  <div class="col-lg-4">
    <app-patients></app-patients>
  </div>
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
</div>

服务

  private readonly URL = 'http://localhost:8080/api/patients';

  constructor(private httpClient: HttpClient) {
  }

  public getPatient(id: number): Observable<Patient> {
    const url = `${this.URL}/${id}`;
    return this.httpClient.get<Patient>(url);
  }

  public getPatients(): Observable<Patient[]> {
    console.log('inside service getPatients');
    return this.httpClient.get<Patient[]>(this.URL);
  }

  public addPatient(patient: Patient): Observable<Patient> {
    return this.httpClient.post<Patient>(this.URL, patient);
  }

PatientAddComponent 中的 addPatient 方法

constructor(private patientService: PatientService, private router: Router, private patientsComp: PatientsComponent) {
  }

  ngOnInit() {
  }

  addPatient() {
    this.patientService.addPatient(this.patient).subscribe((patient) => {
    //redirection to page with new patient. This part works fine.
    this.router.navigateByUrl(patient.id.toString());
      }
    );

带数组的组件

  patients: Patient[];

  constructor(private patientService: PatientService) {

  }

  ngOnInit() {
    console.log('inside patients on init');
    this.patientService.getPatients().subscribe(patients => {
      this.patients = patients;
    });
  }

console.log 显示数组确实已更新，因此看起来这部分一切正常，但更改未反映在 Patients 组件的 html 代码中：

<div id="overflowControl">
  <div *ngFor="let patient of patients" class="list-group" id="list-tab" role="tablist" [routerLink]="['/', patient.id]">
    <div class="container">
      <a class="list-group-item list-group-item-action" id="list-home-list" data-toggle="list" href="#list-home"
         role="tab" aria-controls="home" (click)="toggleActive()">
        <div class="row">
          <div class="col-lg-9">
            <p class="pt-2 pl-2">{{patient.name}}</p>
            <p class="pl-2">{{patient.date | date: 'short'}}</p>
          </div>
          <div class="col-lg-3">
            <h3 class="pt-2"><i class="fa fa-female sex-icon" *ngIf="patient.sex == 'female'"></i></h3>
            <h3 class="pt-2"><i class="fa fa-male sex-icon" *ngIf="patient.sex == 'male'"></i></h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

我必须手动刷新浏览器页面，然后我才能看到最近添加的对象列表。如何确保在添加新对象时更新对象列表？这是我正在使用的 Angular 的当前版本：

link 到 github 项目： https://github.com/kolos181/med-records/tree/master/src/app/components

Answer 1

问题已通过使用 EventEmitter 在组件之间创建共享服务得到解决。更改代码：

intermediate.service.ts

import {EventEmitter, Injectable, Output} from '@angular/core';
import {Patient} from '../models/Patient';

@Injectable({
  providedIn: 'root'
})
export class IntermediateService {

  @Output() newPatient: EventEmitter<Patient> = new EventEmitter<Patient>();

  constructor() {
  }

  onNewPatient(patient: Patient) {
    this.newPatient.emit(patient);
  }
}

patientscomponent.ts

constructor(private patientService: PatientService, private interService: IntermediateService) {
  }
  ngOnInit() {
    this.interService.newPatient.subscribe(patient => {
      this.patients.unshift(patient);
    });
    //rest of code
}

患者-add.component.ts

  constructor(private patientService: PatientService, private router: Router, private interService: IntermediateService) {
  }
  addPatient() {
    this.patientService.addPatient(this.patient).subscribe((patient) => {
        this.interService.onNewPatient(patient);
    //rest of code
}

异步更新数组不会使用 *ngFor 更新 html。只有页面刷新有效。如何让它实时更新？

Asynchronously updated array doesn't update html with *ngFor. Only page refresh works. How to make it update in real time?

asynchronous

observable

ngfor

angular