Изменения углового наблюдателя не обновляют графический интерфейс

Я подписываюсь в named.component на тему, и она срабатывает, когда тема меняется, поэтому наблюдаемая работает. но почему мой графический интерфейс не реагирует на изменение языка?

этот компонент находится в fields.module.ts, а CacheService предоставляется app.module.ts

имена.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();
      }
    }

имена.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(); безрезультатно.

Добавлены скобки для subjectLang и subjectEdit. ngOnInit() { this.langSub = this.cache.subjectLang().subscribe((lang: string) => { this.lang = lang; }); this.editSub = this.cache.subjectEdit().subscribe((edit: boolean) => { this.editMode = edit; }); } Не могли бы вы поделиться кодом, в котором вы отправляете информацию о триггере (.next)

— 22.02.2019 06:55

subjectLang = new Subject();   onLangChange(lang: string) {       this.subjectLang.next(lang);   }    subjectEdit = new Subject();   onEditChange(edit: boolean) {       this.subjectEdit.next(edit);   }

— 23.02.2019 15:15

скобки не нужны для subjectLang/Edit

— 23.02.2019 15:15

angular observable angular2-template subject

22.02.2019 06:34

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...