角度观测器变化不更新gui

Question

我在names.component中订阅了一个主题，当主题发生变化时，它就会触发，这样就可以观察到它的工作了。但是为什么我的GUI对"lang“的变化没有反应呢？

此组件位于fields.module.ts中，CacheService由app.module.ts提供。

names.component.ts

​

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs';
    import { CacheService } from 'src/app/shared/cache.service';
    
    @Component({
      selector: 'field-names',
      templateUrl: './names.component.html',
      styleUrls: ['./names.component.scss']
    })
    export class NamesComponent implements OnInit, OnDestroy {
      @Input() value;
      editSub: Subscription;
      editMode;
      langSub: Subscription;
      lang = "de";
    
      constructor(private cache: CacheService) {}
    
      ngOnInit() {
        this.langSub = this.cache.subjectLang.subscribe((lang: string) => {
          this.lang = lang; 
        });
    
        this.editSub = this.cache.subjectEdit.subscribe((edit: boolean) => {
          this.editMode = edit; 
        });
      }
    
      ngOnDestroy() {
        this.langSub.unsubscribe();
      }
    }

​

names.component.html

​

<div class="item noBottom" [ngClass]="{
  'has-danger': nameEn.invalid || nameFr.invalid || nameDe.invalid || nameIt.invalid,
  'has-success': nameEn.valid && nameFr.valid && nameDe.valid && nameIt.valid
}">
<div class="d-flex" [ngStyle]="{'display': (lang != 'en' && lang !='*') ? 'none !important' : 'inherit'}">
  <div class="col-md-2 label" i18n="@@tables.general.name">Name {{lang}}</div>
  <div class="col-md-1 flag en"></div>
  <div class="col-md-9">
    <input type="text" class="form-control" accesskey="e" id="nameEn" placeholder="Name" required [ngModel]="value.l10n.en" name="nameEn" #nameEn="ngModel" [disabled]="!editMode">
    <div *ngIf="nameEn.errors && (nameEn.dirty || nameEn.touched)" class="form-control-feedback" >
      <p *ngIf="nameEn.errors.alphaNum" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.alphaNum">a</span></p>
    </div>
  </div>
</div>
<div class="d-flex" [ngStyle]="{'display': (lang != 'de' && lang !='*') ? 'none !important' : 'inherit'}">
  <div class="col-md-2 label"><span [hidden]="lang == '*'" i18n="@@tables.general.name">Name</span></div>
  <div class="col-md-1 flag de"></div>
  <div class="col-md-9">
    <input type="text" class="form-control" accesskey="d" id="nameDe" placeholder="Name" required [ngModel]="value.l10n.de" name="nameDe" #nameDe="ngModel" [disabled]="!editMode">
    <div *ngIf="nameDe.errors && (nameDe.dirty || nameDe.touched)" class="form-control-feedback" >
      <p *ngIf="nameDe.errors.alphaNum" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.alphaNum">a</span></p>
      <p *ngIf="nameDe.errors.required" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.required">r</span></p>
    </div>
  </div>
</div>
<div class="d-flex" [ngStyle]="{'display': (lang != 'fr' && lang !='*') ? 'none !important' : 'block'}">
  <div class="col-md-2 label"><span [hidden]="lang == '*'" i18n="@@tables.general.name">Name</span></div>
  <div class="col-md-1 flag fr"></div>
  <div class="col-md-9">
    <input type="text" class="form-control" accesskey="f" id="nameFr" placeholder="Nom" required [ngModel]="value.l10n.fr" name="nameFr" #nameFr="ngModel" [disabled]="!editMode">
    <div *ngIf="nameFr.errors && (nameFr.dirty || nameFr.touched)" class="form-control-feedback" >
      <p *ngIf="nameFr.errors.alphaNum" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.alphaNum">a</span></p>
      <p *ngIf="nameFr.errors.required" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.required">r</span></p>
    </div>
  </div>
</div>
<div class="d-flex" [ngStyle]="{'display': (lang != 'it' && lang !='*') ? 'none !important' : ''}">
  <div class="col-md-2 label"><span [hidden]="lang == '*'" i18n="@@tables.general.name">Name</span></div>
  <div class="col-md-1 flag it"></div>
  <div class="col-md-9">
    <input type="text" class="form-control" accesskey="i" id="nameIt" placeholder="Nome" required [ngModel]="value.l10n.it" name="nameIt" #nameIt="ngModel" [disabled]="!editMode">
    <div *ngIf="nameIt.errors && (nameIt.dirty || nameIt.touched)" class="form-control-feedback" >
      <p *ngIf="nameIt.errors.alphaNum" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.alphaNum">a</span></p>
      <p *ngIf="nameIt.errors.required" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.required">r</span></p>
    </div>
  </div>
</div>
</div>

​

我做错了什么，我也尝试了this.cdRef.detectChanges()；没有效果。

Answer 1

我必须将订阅服务器从ngOnInit转移到构造函数。