Question

我有一个使用ngStyle的组件，但是即使我已经检查了fiedLand的设置，它也会始终返回else条件，并且在更改后我也尝试detectChanges（）但它不会更新。 span元素确实会更新，并且使用fieldLang，所以我真的不知道为什么。

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': (fieldLang != 'en' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'de' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'it' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>

names.component.js

import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectorRef } 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 {
  @Input('disabled') editMode;
  @Input() value: MultiLangTxtModel;
  @Output() value2 = new EventEmitter<MultiLangTxtModel>();

  private fieldLang = '*';
  fieldLangSubscr: Subscription;

  constructor(private cdRef:ChangeDetectorRef, private cache: CacheService) {
    this.fieldLangSubscr = this.cache.subjectFieldLang.subscribe((l: string) => {
      this.fieldLang = l; 
      this.cdRef.detectChanges();
    });
  }

  ngOnInit() {
    if(!this.value) {
      this.value = {l10n:{de:null,en:null,fr:null,it:null}};
      // this.cdRef.detectChanges();
    }
  }

  onChange() {
    this.value2.emit(this.value);
  }
}

Answer 1

在HTML文件中使用可观察变量和异步管道

<div class="d-flex" [ngStyle]="{'display': ((fieldLangSubscr | async) != 'en' && (fieldLangSubscr | async) != '*') ? 'none !important' : 'inherit'}">

...

按如下所示替换构造函数代码

fieldLangSubscr: any;

  constructor(private cdRef:ChangeDetectorRef, private cache: CacheService) {
    this.fieldLangSubscr = this.cache.subjectFieldLang;
  }

为什么ngStyle总是以角度选择其他情况

1 个答案: