angular - 角度观察者更改不更新 gui
问题描述
我在 names.component 中订阅了一个主题,它会在主题发生更改时触发,因此 observable 正在工作。但为什么我的 GUI 对“lang”变化没有反应?
该组件位于 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> <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> <span i18n="@@tables.error.alphaNum">a</span></p>
<p *ngIf="nameDe.errors.required" class="alert alert-danger"><span i18n="@@tables.general.name">c</span> <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> <span i18n="@@tables.error.alphaNum">a</span></p>
<p *ngIf="nameFr.errors.required" class="alert alert-danger"><span i18n="@@tables.general.name">c</span> <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> <span i18n="@@tables.error.alphaNum">a</span></p>
<p *ngIf="nameIt.errors.required" class="alert alert-danger"><span i18n="@@tables.general.name">c</span> <span i18n="@@tables.error.required">r</span></p>
</div>
</div>
</div>
</div>
我做错了什么,我也试过 this.cdRef.detectChanges(); 没有效果。
解决方案
我不得不将我的订阅者从 ngOnInit 移动到构造函数
推荐阅读
- android - 未经授权的广告点击 - 违反设备和网络滥用政策
- r - 如何仅将 2 个可能的 eventReactive 放入一个变量中
- javascript - 单击链接时停止自动滚动
- r - 通过循环为不相互跟随的数字创建数据帧
- tensorflow - 使用 ssd_mobilenet 之前的标准化图像
- javascript - Javascript window.addeventlistener 未在 chrome 中触发
- python - 别名:/usr/local/bin/pip3:未找到,但.bashrc 是正确的
- java - 无法登录,statusCode=SIGN_IN_REQUIRED
- android - 如何在 android studio 中使用 holder 打开另一个活动
- bash - 用shell脚本中的多行替换文件中的占位符