Question

我有两个组件，A和B，还有一个服务。每次选择组件A中的选项时，我想更新组件B的表。更新在第一次发生得很好，但在那之后，我有一个订阅问题，因为有许多订阅者和方法一次又一次地执行。我想只执行一次onInit中的方法，因为它们从serve获取数据以填充该表。

这是组件A.每次选择一个选项时，都会执行onChange方法。

模板组件A

 <select class="btn btn-outline-secondary btn-sm (change)="onChange($event.target.value)">
 <option *ngFor="let gradeBloco of gradeBlocoNumParciais"[value]="gradeBloco?.getCodigo()">{{gradeBloco.descricao}}</option>
</select>

方法组件A

onChange(gradeBlocoCod) {
 this.turmaDisciplinaService.gradeBlocoNumParciais = 
 this.gradeBlocoNumParciais.find(gradeBloco => gradeBloco.codigo == 
 gradeBlocoCod);
 this.nextSubjectByRoute();
}

执行主题的方法

nextSubjectByRoute(){ 
  this.turmaDisciplinaService.subjectGradeBlocoNumParciaisNotas.next();
}

服务

export class TurmaDisciplinaService {
   turmaDiscip: TurmaDisciplina;
   gradeBlocoNumParciais: GradeBlocoNumParciais;
   boletim: Boletim;
   turmaDisciplinaAlunos: TurmaDisciplinaAluno[] = [];
   subjectTurmaDisciplina = new Subject<TurmaDisciplina>();
   subjectGradeBlocoNumParciaisNotas = new Subject<GradeBlocoNumParciais>();
}

模板组件B

<table class="table table-bordered table-striped">
        <thead class="thead-light">
              <tr class="d-flex">
                  <th class="col-md-1 hard_left numSeq" scope="col">Nº</th>
                  <th class="col-md-6 next_left" scope="col">Nome</th>
                  <th class="col-md-2 col-sm-2 col-xs-2" *ngFor="let avaliacao of avaliacaoService.avaliacoes" scope="col"><modal-edit-avaliacao [avaliacao]="avaliacao" ></modal-edit-avaliacao><!--<a title="Editar Avaliação" class="btn" (click)="hellow()"><i class="fa fa-pencil-square-o"></i></a>{{avaliacao.nome}}--></th>
                  <th class="col-md-2">Média</th>
              </tr>
          </thead>
          <tbody>
              <tr class="d-flex" *ngFor="let tda of turmaDisciplinaAlunos;  let j = index;">
                  <td class="col-md-1 hard_left numSeq">{{tda.numSequencia}}</td>
                  <td class="col-md-6 next_left">{{tda.aluno.nome}}</td>
                  <td class="col-md-2 col-sm-2 col-xs-2" *ngFor="let avaliacao of avaliacaoService.avaliacoes; let i = index;"><!-- usado para criar a linha de notas -->
                    <input id="{{'c'+i+'l'+j}}" (keydown.Tab)="onKey($event)" type="number" min="0" max="10" [disabled]="inputDisabled" [ngClass]="{'input-notas': true, 'nota':notaInvalid}" [ngModel]="turmaDiscAlunoNotas[j][i]?.nota" (ngModelChange)="turmaDiscAlunoNotas[j][i].nota = $event" (change)="handleChange(turmaDiscAlunoNotas[j][i])">
                </td>
                  <td class="col-md-2" id="col-media">{{turmaDiscAlunoMedia[j]}}</td>
              </tr>
          </tbody>
      </table>

方法onInit组件B

ngOnInit() {
    this.todayDate = this.utilService.getCurrentDate();

        this.turmaDisciplinaService.subjectGradeBlocoNumParciaisNotas.subscribe(res => {
            console.log(res);
            this.turmaDisciplinaService.gradeBlocoNumParciais = res;
            this.initTurmaDiscAlunos();
            this.initAvaliacoesArray();
        });

}

Answer 1

我找到了解决方法。

将此变量添加到组件B中。

public subscribers: any = {};

在组件B中实现onDestroy接口之后，在被重写的方法上添加以下代码。

ngOnDestroy() {
   subscribers.name.unsubscribe();
}

最后用此代码修改ngOnInit。

ngOnInit() {
this.todayDate = this.utilService.getCurrentDate();
  this.subscribers.name = this.turmaDisciplinaService.subjectGradeBlocoNumParciaisNotas.subscribe(res => {
        this.turmaDisciplinaService.gradeBlocoNumParciais = res;
        this.initTurmaDiscAlunos();
        this.initAvaliacoesArray();
    });
   }

更新Angular中的组件表

1 个答案: