Angular 7: Служба не обновляет страницу динамически, она обновляется после перезагрузки страницы

Question

Я работаю в angular 7 Мне нужно выполнить простую задачу, есть один компонент teacher-details, который показывает список зарегистрированных учителей в формате таблицы (Получение этого из базы данных с помощью node js), а также обновляет таблицу, когда добавлена ​​новая запись учителя, у меня также есть teacher.service.ts, который содержит массив учителей и содержит методы getTeacher() и addTeacher(), поэтому компонент учителя, использующий эту службу, отображает запись.

Моя проблема в том, что когда я ввожу новую запись учителя, она не получает обновления пользовательского интерфейса / страницы, но когда я перезагружаю ее, она обновляется, но я хочу обновлять страницу динамически, как только я вхожу запись.

учитель-details.component.ts

@Component({
  selector: 'app-teacher-details',
  templateUrl: './teacher-details.component.html',
  styleUrls: ['./teacher-details.component.css']
})
export class TeacherDetailsComponent implements OnInit {

  private teachers: Teacher[] = []
  constructor(private teacherServ: TeachersService, private auth: AuthService) {
   }

  ngOnInit() {

    this.auth.getTeacherRecords().subscribe(
      res => this.teachers = res.message,
      err => console.log(err)
    ),



    this.teachers = this.teacherServ.getTeachers();
  }

}

учитель.service.ts

@Injectable()
export class TeachersService {
teacherChanged = new EventEmitter<Teacher[]>();
private teachers: Teacher[] = [];

  constructor(private auth: AuthService) {}

  getTeachers() {
    return this.teachers;
  }

  addTeachers(teacher: any) {
    this.auth.addTeacher(teacher)
    .subscribe(
      res => console.log(res),
      err => console.log(err)
    );
    this.teachers.push(teacher);
  }
}

Я также использую свою службу аутентификации, которая получает данные из базы данных.

@Injectable()
export class AuthService {

  private addTeacherUrl = "http://localhost:3000/api/addTeacher"
  private getTeacherRecordsUrl = "http://localhost:3000/api/getTeacherRecords"

  addTeacher(teacherRecord: any) {
    console.log("Inside addTEacher servvice")
    console.log(teacherRecord)
    return this.http.post<any>(this.addTeacherUrl, teacherRecord)
  }

  getTeacherRecords() {
    return this.http.get<any>(this.getTeacherRecordsUrl, {
     observe: "body" 
    })
  }
}

учитель-детали. Компонент. html

<div class="card">
  <div class="card-header border-0">
    <div class="row align-items-center">
      <div class="col">
        <h3 class="mb-0">Teacher Details</h3>
      </div>
    </div>
  </div>
  <div class="table-responsive">
    <!-- Projects table -->
    <table class="table align-items-center table-flush">
      <thead class="thead-light">
        <tr>
          <th scope="col">Teacher Name</th>
          <th scope="col">Teacher subject</th>
          <th scope="col">Teacher branch</th>
          <th scope="col">Teacher Semester</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let teachers of teachers">
          <th scope="row">
            {{teachers.fullName}}
          </th>
          <td>
            {{teachers.subject}}
          </td>
          <td>
            {{teachers.branch}}
          </td>
          <td>
            {{teachers.semester}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Я очень не понимаю, что мне делать. Пожалуйста, помогите мне.

ОБНОВЛЕНИЕ: -

Я внес следующие изменения в соответствии с предложением:

auth.service.ts

@Injectable()
export class AuthService {

  private addTeacherUrl = "http://localhost:3000/api/addTeacher"
  private getTeacherRecordsUrl = "http://localhost:3000/api/getTeacherRecords"

   subject = new Subject<Teacher[]>();
   teachers: Teacher[] 
  constructor(private http: HttpClient) { }

  addTeacher(teacherRecord: any) {

    console.log("Inside addTEacher servvice")
    console.log(teacherRecord)
    this.teachers.push(teacherRecord)
    this.subject.next(this.teachers)
    return this.http.post<any>(this.addTeacherUrl, teacherRecord)
  }

  getTeacherRecords() {
    return this.http.get<any>(this.getTeacherRecordsUrl, {
     observe: "body" 
    })
  }
}

teacher-details.component.ts

@Component({
  selector: 'app-teacher-details',
  templateUrl: './teacher-details.component.html',
  styleUrls: ['./teacher-details.component.css']
})
export class TeacherDetailsComponent implements OnInit {

   teachers: Teacher[];
  constructor(private teacherServ: TeachersService, private auth: AuthService) {
   }

  ngOnInit() {
    this.auth.getTeacherRecords().subscribe(
      res => this.teachers = res.message,
      err => console.log(err)
    );


    this.auth.subject.subscribe(
      res => console.log(res),
      err => console.log(err)
    )
  }

}

Еще обновление данных после перезагрузки страницы

Спасибо.

Answer 1

Метод getTeachers() в вашей службе является синхронным и возвращает значения только при его вызове.

Что вам, вероятно, понадобится, так это Subject, который выдает значения всякий раз, когда вы ему указываете. Я считаю, что в вашем сервисе что-то вроде этого:

import { Subject } from 'rxjs';

const subject = new Subject<Teacher[]>();

addTeacher(teacherRecord: any) {
    console.log("Inside addTEacher servvice")
    console.log(teacherRecord)
    //HERE YOU ADD THIS
    this.teachers.add(teacherRecord);
    this.subject.next(this.teachers);

    return this.http.post<any>(this.addTeacherUrl, teacherRecord)
}

и в вашем ts-файле вы инициализируете так:

ngOnInit() {

    this.auth.getTeacherRecords().subscribe(
      res => this.teachers = res.message,
      err => console.log(err)
    ),

    this.auth.subject.subscribe(
      res => this.teachers = res.message,
      err => console.log(err)
    ),
  }

Кроме того, не забудьте отказаться от подписки на OnDestroy, чтобы избежать утечек памяти .

Answer 2

Вы подписываетесь на getTeacherRecords() в onInit().

Этот метод возвращает наблюдаемый объект, который не обновляется, когда вы что-то делаете на странице, потому что новый HTTP-запрос не отправляется.

Проблема в том, что вы используете наблюдаемый объект, который не генерирует других значений. Как я вижу, вы используете EventEmitter в службе учителей. Вы должны подписаться на него в своем компоненте следующим образом:

ngOnInit() {
    this.teachers = this.teacherServ.teacherChanged.subscribe(
        teachers => this.teachers = teachers
    );
  }

Примечание Вы должны unsubscribe в ngOnDestroy - это лучшая практика.

Не забывайте для выдачи учителей после добавления:

addTeachers(teacher: any) {
    this.auth.addTeacher(teacher)
    .subscribe(
      res => console.log(res),
      err => console.log(err)
    );
    this.teachers.push(teacher);
    // note that line
    this.teacherChanged.emit(this.teachers);
  }

Это должно сработать, надеюсь, что hepls!