почему ngStyle всегда выбирает другой случай в угловых - PullRequest
Новая
       16

почему ngStyle всегда выбирает другой случай в угловых

0 голосов
/ 13 марта 2019

У меня есть компонент, который использует ngStyle, но он всегда возвращает условие else, даже если я проверил, что fiedLand установлен, и после изменения я также пытаюсь обнаружить 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);
  }
}

1 Ответ

0 голосов
/ 13 марта 2019

Использовать переменную и асинхронный канал в файле 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;
  }
...